js实现倒计时

时间：2018-08-20 12:46:55 阅读：203 评论：0 收藏：0 [点我收藏+]

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)