ul,li {padding: 0;margin: 0;}.regBox {width: 100%;overflow: hidden;margin-top: 10px;}.regBox ul {margin-bottom: 20px;}.regBox ul li {display: block;border-bottom: 1px solid #fafafa;padding: 13px 15px;background: #FFFFFF;}.regBox ul li span {display: inline-block;width: 20%;margin-right: 5%;text-align: justify;font-size: 16px;}.regBox ul li input[type=text].ph,.regBox ul li input[type=text].mm {height: auto;display: inline;width: 65%;border: 0;padding: 0;margin: 0;font-size: 16px;}.regBox ul li input[type=text].yzm {height: auto;display: inline;width: 45%;border: 0;padding: 0;margin: 0;font-size: 16px;padding: 8px 0;}button[type=button].generate_code {width: 80px;color: #FFFFFF;background: #14ce5f;text-align: center;font-size: 12px;padding: 8px 0;border-radius: 4px;border: 0;float: right;}.regBox ul li.li-yzm {padding: 5px 10px;}.regBox ul li.li-yzm span {padding: 8px 0;}.ptxy {color: #666666;font-size: 14px;}.nodisaded {display: inline-block;width: 16px;height: 16px;border: 1px solid #cccccc;border-radius: 2px;color: #fafafa;text-align: center;line-height: 16px;font-size: 12px;}.ptxy .ptxy_w {display: inline-block;height: 24px;line-height: 24px;font-size: 16px;float: left;}.ptxy .ptxy_a {color: #cf151a;}.ptxy-icon {display: inline-block;height: 24px;padding-top: 2px;float: left;margin-right: 10px;margin-left: 15px;}input[type=button].goregBtn {border: 0;padding: 10px 0;width: 90%;text-align: center;border-radius: 4px;background: #cf151a;color: #FFFFFF;margin-left: 5%;margin-top: 20px;}
<body style="background: #fafafa;"> ???<div class="regBox"> ???<ul> ???????<li> ???????????<span>手机号</span> ???????????<input class="ph" type="text" name="" id="" value="" placeholder="请输入手机号"/> ???????</li> ???????<li> ???????????<span>密码</span> ???????????<input class="mm" type="text" name="" id="" value="" placeholder="请输入密码"/> ???????</li> ???????<li class="li-yzm"> ???????????<span>验证码</span> ???????????<input class="yzm" type="text" name="" id="" value="" placeholder="请输入短信验证码"/> ???????????<button type="button" class="obtain generate_code" ?onclick="settime(this);">获取验证码</button> ???????</li> ???????????</ul> ???????<p class="ptxy"> ???????<span class="ptxy-icon" onclick="changeState()"><span id="Disicon" data-icon = "nosel" class="nodisaded">√</span></span> ???????<span class="ptxy_w">已经阅读并同意 <a class="ptxy_a" href="###">《平台协议》</a></span> ???????????</p> ???????<input class="goregBtn" type="button" name="" id="" value="注册" /> ???</div> ???</body>
<body style="background: #fafafa;"> ???<div class="regBox"> ???<ul> ???????<li> ???????????<span>手机号</span> ???????????<input class="ph" type="text" name="" id="" value="" placeholder="请输入手机号"/> ???????</li> ???????<li> ???????????<span>密码</span> ???????????<input class="mm" type="text" name="" id="" value="" placeholder="请输入密码"/> ???????</li> ???????<li class="li-yzm"> ???????????<span>验证码</span> ???????????<input class="yzm" type="text" name="" id="" value="" placeholder="请输入短信验证码"/> ???????????<button type="button" class="obtain generate_code" ?onclick="settime(this);">获取验证码</button> ???????</li> ???????????</ul> ???????<p class="ptxy"> ???????<span class="ptxy-icon" onclick="changeState()"><span id="Disicon" data-icon = "nosel" class="nodisaded">√</span></span> ???????<span class="ptxy_w">已经阅读并同意 <a class="ptxy_a" href="###">《平台协议》</a></span> ???????????</p> ???????<input class="goregBtn" type="button" name="" id="" value="注册" /> ???</div> ???</body>
//改变平台协议function changeState(){ ???var icons = document.getElementById("Disicon"); ???console.log(icons.getAttribute("data-icon")); ???var iconsattribute = icons.getAttribute("data-icon"); ???if(iconsattribute=="nosel"){ ???????icons.setAttribute("data-icon","sel"); ????icons.style.background = "#14ce5f"; ???icons.style.borderColor= "#14ce5f"; ???icons.style.color = "#FFFFFF"; ???}else{ ???????icons.setAttribute("data-icon","nosel"); ????icons.style.background = "#fafafa"; ???icons.style.borderColor= "#cccccc"; ???icons.style.color = "#fafafa"; ???}}//倒计时 ?var countdown=10; ?function settime(val) { ?????if (countdown == 0) { ?????????val.removeAttribute("disabled"); ?????val.innerHTML="获取验证码"; ?????val.style.background = "#14ce5f"; ??????countdown = 10; ?????return false; ?} else { ?????val.setAttribute("disabled", true); ??????val.style.background = "#8d8a8c"; ???val.innerHTML="重新发送(" + countdown + ")"; ?????????countdown--; ?????} ?????setTimeout(function() { ?????????settime(val); ?????},1000); ?} ?效果图：
js实现倒计时
原文地址：https://www.cnblogs.com/vesnawsx/p/9504848.html