h5注册 n多注释掉了 昨天白写这么多

最新推荐文章于 2022-06-22 11:34:35 发布
最新推荐文章于 2022-06-22 11:34:35 发布
阅读量654 收藏
点赞数
分类专栏： jq学习 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38674970/article/details/79578216
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手机端</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="top">注册</div>
	<div class="phone">
		<span class="phone-left">号码归属地</span>
		<span class="phone-right">中国> </span>
	</div>
	<div class="phone">
		<div class="phone-left">+86</div>
		<div class="lle"><input type="text" placeholder="请输入手机号" id="phone" οnkeyup="value=value.replace(/[^\d]/g,'')"></div>
		<div class="number-right">×</div>
	</div>
	<div class="phone">
		<div class="phone-left">验证码</div>
		<div class="number-center"><input id="yan" type="text" placeholder="请输入验证码" οnkeyup="value=value.replace(/[^\d]/g,'')"></div>
		<div class="get-code"><button id="code-btn" name="code">获取验证码</button></div>
	</div>
	<div class="go">
		<a href="#" id="lesg">登录</a>
	</div>
	<div class="footer">
		<p>登录代表你已同意<span>《桔街网用户协议》</span></p>
	</div>
	<!-- 弹出框 -->
	    <div class="box">
        <div class="box1">
            <p>请输入正确的号码，<br>请重新输入</p>
        </div>
    </div>
	<!-- 弹出框 -->
	<script src="js/jquery.js"></script>
	<script src="js/index.js"></script>
	
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; list-style:none; outline:none; font-family:"微软雅黑";}
img{ display:block; border:none; margin:0 auto;}
a{ text-decoration:none;}
body {
	font-size: 24px;
}
.top {
	text-align: center;
	width: 100%;
	height: 188px;
	line-height: 188px;
	font-size: 3rem;
	color:#333;
	border-bottom:1px solid #999 ;
	background-color: #f5f5f5;
}
.phone {
	width: 88%;
	margin:0 auto;
	line-height: 142px;
	height: 142px;
	border-bottom: 1px solid #d9d9d9;
}
.phone-left {
	font-size: 48px;
	color:#333;
	float: left;
}
.phone .phone-right {
	font-size: 1.5rem;
	color:#bfbfbf;
	float: right;
}
.lle {
	float: left;
	padding-left: 219px;
}
.lle input {
	border:none;
	font-size: 2rem;
	color:#b2b2b2;
}
 .number-center {
	float: left;
	padding-left: 170px;
}
.number-center input {
	border:none;
	font-size: 2rem;
	color:#b2b2b2;
}
.number-right {
	font-size: 2rem;
	color:#333;
	float: right;
}
.get-code {
	float: right;
}
.get-code button {
	border:none;
	color:#fff;
	font-size: 1.25em;
	text-align: center;
	background-color: #ff7600;
	width: 160px;
	height: 75px;
}
.go	{
	width: 80%;


	text-align: center;
	height: 165px;
	margin:0 auto;
	margin-top: 113px;
}
.go a {
	width: 100%;
	height: 165px;
	font-size: 2rem;
	line-height: 165px;
	background-color: #e6e6e6;
	color:#b2b2b2;
	text-decoration:none;
	display: block;
}
.on {
	background-color: #ff7600;
	color:#fff;
}
.footer {
	text-align: center;
	height: 70px;
	margin:0 auto;
	margin-top: 600px;
}
.footer p {
	font-size: 1.66rem;
	color:#333;
}
.footer span {
	color:#ff7600;
}
/*弹出框*/
        .box{
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.2);
            display: none;
        }
        .box1{
            width: 500px;
   		    height: 219px;
   			position: fixed;
   			left: 50%;
    		top: 57%;
    		font-size: 1.5rem;
    		text-align: center;
    		background-color: #808080;
    		margin-left: -250px;
        }
        .box1 p {
        	padding-top:12%;
        	line-height: 53px;
        	color:#fff;
        	margin:0 auto;
        	max-width: 350px;
        }
/*弹出框*/

	// 弹出框
	// $(function(){
	// 	$('#lesg').click(function(){

	// 		$('.box').show();
	// 		setTimeout(function(){
	// 			$('.box').hide();
	// 		},2000);
	// 	});
	// });
	// 弹出框

// 输入正确的手机号
		// $(function(){
		// 	$('.go').find('a').click(function(){
		// 		var mobile = $('#phone').find('input').val();
		// 		var mobilevalid = /^1(3|4|5|7|8)\d{9}$/;
		// 		if (!mobilevalid.test(mobile)) {
		// 			// 如果手机号码错误
		// 			console.log('手机号错啦');
		// 			$('.box').show();
		// 			setTimeout(function(){
		// 			$('.box').hide();
		// 			},2000);
		// 			return false;

		// 		}
		// 	});				
		// });
		// 点击消失 
				$(function(){
			$('.number-right').click(function(){
				console.log(111);
					$("#phone").val("");
			})
		});
		// input都不为空时高亮
		$(function(){
			$("input").on("keyup paste",function(){  
     						 if(($('#phone').val() !="") && ($('#yan').val() !="")){
        		$('#lesg').css({'background':'#ff7600','color':'#fff'});
      					} 
});
			// $("input").blur(function(){

			// });
		});

		// 倒计时
// 	var countdown=60; 
// function sendemail(){
//     var obj = $("#btn");
//     settime(obj);
    
//     }
// function settime(obj) { //发送验证码倒计时
//     if (countdown == 0) { 
//     	obj.css('background','#ff7600');
//         obj.attr('disabled',false); 
//         //obj.removeattr("disabled"); 
//         obj.val("获取验证码");
//         countdown = 60; 
//         return;
//     } else { 
//     	obj.css('background','#e6e6e6')
//         obj.attr('disabled',true);
//         obj.val( "" + countdown + "" );
//         countdown--; 
//     } 
// setTimeout(function() { 
//     settime(obj) }
//     ,1000) 
// }
	var code = ""; //接收验证码   
$('#code-btn').click(function(){
  	var count = 60;
    var phone=$("#phone").val();//手机号码  
    var reg_phone = /1\d{10}/;
    if(!reg_phone.test(phone)){   //验证手机是否符合格式
        	$('.box').show();
			setTimeout(function(){
				$('.box').hide();
			},2000);
        return false;
    } 
    //开始计时  
    $("#code-btn").attr('disabled','disabled');  
    $("#code-btn").html("倒计时" + count + "秒");  
    var timer = setInterval(function(){  
		$("#code-btn").css('background','#ccc');
      	count--;
      $("#code-btn").html("倒计时" + count + "秒"); 
      if (count==0) {
      	$("#code-btn").css('background','#ff7600');
        clearInterval(timer);
        $("#code-btn").attr("disabled",false);//启用按钮  
        $("#code-btn").html("重新获取");
        code = "";//清除验证码。如果不清除，过时间后，输入收到的验证码依然有效 
      }
    },1000);

    //向后台发送处理数据  
    $.ajax({  
        type: "POST", //用POST方式传输  
        dataType: "text", //数据格式:JSON  
        url: '', //目标地址  
        data: "phone=" + phone + "&code=" + code,  
        error: function (XMLHttpRequest, textStatus, errorThrown) { },  
        success: function (msg){ }  
    });
});

qq_38674970
关注
专栏目录
H5多图片上传——基础篇
AIGC大前端小王子
09-04 2372
本文主要介绍多图片上传，文件也同样是适用哦。 注：案例代码展示是引入外部vue.js+mui框架实现的，思路可以参考，但是代码要有所增减哦 1.HTML页面相关代码 &lt;input class="addImg-content" type="file" @change="addImg" ref="file" accept="image/*" name="upload&quo
H5入门教程
最新发布
weixin_43416590的博客
07-20 1353
action属性表示后端的服务器地址，name表示名称，method表示数据提交的方式，与网络请求有关，一般有get和post两种。元素可分成很多类，具体可以参考如下的网址：https://developer.mozilla.org/en-US/docs/Web/HTML/Element，但是一些教程为了简单，按照块级元素和行内元素分类，这个分类具体可以参考如下网址：https://blog.csdn.net/weixin_46561196/article/details/115510852。
去掉注释index.html
weixin_33980459的博客
12-22 1404
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed...
Html5 注释
Legendlijianfei的博客
09-18 2054
定义 注释标签用于在源文档中插入注释。注释会被浏览器忽略。可使用注释对您的代码进行解释，这样做有助于自己和别人在以后对代码的编辑和理解。 用法 <!-- 注释内容 --> <html> <body> <!-- this is the comment , do not show in the browser,but can be view in the source code --> 只显示内容，没有头部信息。 <!-- 注释，不在浏览
HTML5-注释标签
AsaZyf的博客
10-01 3614
rt:出现在内容头部【如果浏览器不支持则出现在后面】 rp:用于不支持 "ruby" 元素的浏览器会显示 "rp" 元素的内容 &lt;p&gt;     &lt;rubay&gt;         魑&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;chi&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
HTML5注释快捷键
Lucas_______的博客
11-29 2226
注释快捷建：Ctrl + / 取消注释只需再次点击这个组合键即可。
FashionShop.zip_H5 商城_h5商城_h5注册_h5注册页面_商城h5
07-15
纯手写H5商城，2年前给一个朋友做的，高仿必要商城。页面包含个人，商家，商品分类，详情，订单，登录注册，添加收货地址，提现等34个页面
uniapp开发多页面h5程序_uni-app实现多端开发
weixin_34060849的博客
12-24 3759
多端开发，听名字就感觉不一样，一套代码。多端使用，适用于各个平台。市面上很多关于多端开发的框架，比较常用，流行的框架 uni-app，Chameleon(变色龙),taro这些，都可以支持多端，一套代码，8个平台支持，语法差异上，uni-app和Chameleon(变色龙)都选择使用的是小程序和vue的语法结合，但是taro语法是react,熟悉react语法，比较熟悉这套框架，对于技术选项，框架...
ShopWT B2B2C 多用户商城系统 手机标准版 下载
09-14
系统特点 ... 采用 OOP（面向对象）方式进行核心框架搭建。 结合 MVC 模式进行开发、Redis 缓存机制、全文搜索引擎、查询简洁高效。 多种 API 接口，文件命名规范，注释...使用 H5 标准 Web，js，jq 与 H5 手机版代码。
「uniapp」 H5高德地图定位、周边、路线规划、多点绘制、位置点击监听
AIGC大前端小王子
06-22 2722
>本文主要实现uniapp H5高德地图定位、周边、路线规划、多点绘制。解决新版本高德地图WEB端（JSAPI）`INVALID_USER_SCODE`平台报错问题及自自定义图标大小调整。
H5注册页面源码
11-21
H5注册页面源码 单页源码 CSS页面 完整登录界面
条件注释判断浏览器
anzheng6118的博客
11-27 221
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可...
Html5 知识：注释
guqigongzi的博客
10-08 642
&lt;!–- 注释语句            可以是多行的   --&gt;
H5自学笔记 标签说明
S_xiajinghan的博客
04-12 3199
1. a标签 是链接标签  直接跳转到页面 （变成小手） 点我跳转 _blank 新建窗口打开  _self 当前窗口打开    href 后面直接加URL 2. 图片标记 ——> 空标记  <img src=“” alt=“” winth=“” height=“"/> a.src 是代表路径  3.在a标签内插一个图片 4.标题 h1  h2  
Html 页面注释
HUGEHEADHUGE的专栏
07-22 2674
Html   单行: 多行:   javascript 单行:// 多行:/* */   Vbscript 单行:' 多行:'   ASP 中： 单行：' 多行：'
小程序-H5---条件注释实现跨段兼容
NIKyy的博客
05-30 132
小程序、H5等条件注释实现跨段兼容编译
html多行注释如何实现,html多行注释如何实现？
weixin_33602738的博客
06-18 5820
用户提问注释的符号是 开头： 一般的格式是这样： 其实HTML的注释格式单行和多行都是一样的，你多行的时候就是把结尾的-->打到最后就是了 例如： 这样就多行了，是不是很简单呀 ‍ 提示：一般注释的时候一定要有结尾 -->，否则的话将会注释你推荐答案注释的符号是开头：一般的格式是这样：其实HTML的注释格式单行和多行都是一样的，你多行的时候就是把结尾的-->打到最后就是了例如：这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值