Html
    Css
    Js

    
                        
body {
	background-color:#222222;
}
.clearfix {
	content:"";
	display:block;
	clear:both;
}
.countTime {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:textfield;
	background-color:#222222;
}
.countTime input,.countTime button,.countTime p,.countTime h2 {
	border:none;
	outline:none;
	display:block;
	box-sizing:border-box;
	margin:0 auto;
	color:#daf6ff;
}
.countTime h2 {
	text-align:center;
	font-weight:normal;
	font-size:24px;
	line-height:60px;
}
.countTime input {
	border:solid 1px #3272ba;
	font-size:14px;
	width:200px;
	height:24px;
	float:left;
	color:#333333;
}
.countTime button {
	width:50px;
	height:24px;
	background-color:#0088ff;
	border-radius:5px;
	float:left;
	margin-left:5px;
}
.countTime button:hover {
	background-color:#3272ba;
}
.countTime p {
	text-align:center;
	line-height:70px;
	font-size:40px;
	letter-spacing:0.1em;
	text-shadow:0 0 20px #0aafe6,0 0 20px rgba(10,175,230,0);
}
.countText {
	width:260px;
	height:24px;
	position:relative;
	top:0;
	left:50%;
	transform:translate(-50%,0);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

简单的倒计时

countStart是“开始按钮”,调用counter函数,第一个参数是倒计时的秒数,第二个参数是倒计时显示的位置

$(".countStart").click(function(){
    var time=$(".time").val();
    counter(time,$(".count"));
})
1
      小和尚0
      2017/9/1 17:22:19
      计时器的读秒和手机计时器读秒有误差 你这个好像慢很多 回复