4852919-6cdbd504ca2b1c8a.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta name="msapplication-tap-highlight" content="no">
<meta content="telephone=no" name="format-detection" />
<!-- 引入YDUI样式 -->
<link rel="stylesheet" href="css/ydui.css" />
<!-- 引入swiper样式 -->
<!--mms-->
<!-- 引入YDUI自适应解决方案类库 -->
<script src="js/ydui.flexible.js"></script>
</head>
<body class="m24-view-body">
<div class="g-view m24-view-af">
<div class="m24-nav-bj">
<!--time-->
<div class="c330-time">
<ul class="c330-time-ul clearfix">
<li class="c330-time-01">0</li><li class="c330-time-04 c330-time-077 "><span ></span><span ></span> </li><li class="c330-time-02" >0</li><li class="c330-time-05 c330-time-077"><span></span><span></span></li><li class="c330-time-03">0</li>
</ul>
</div>
<!--音乐播放器-->
<div class="mms-pu">
<audio src="" controls="controls" autoplay="autoplay" class="mms-yping" loop="loop" preload="auto" controls> Your browser does not support the audio tag. </audio>
</div>
</div>
</div>
<style>
html,body{ width: 100%; height: 100%; background-attachment: fixed; background: url(img/mms-330bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.c330-time{margin: 0 auto; height: 4rem; position: fixed; top: 48%; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); width: 100%; font-size: 1rem; color: #FFFFFF; }
.c330-time-ul {margin: 0 auto; width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); display: flex; justify-content: center; }
.c330-time-ul li{font-size: 2.8rem; text-align: center; height: 4rem; line-height: 4rem;}
.c330-time-ul li span{width: 0.44rem; height: 0.44rem; align-self: center; line-height: 2rem; background: #FFFFFF; border-radius:50%; display:none; }
.c330-time-ul li span:nth-of-type(1){margin-top: 1.3rem;margin-bottom: 0.5rem;}
.c330-time-ul li span.c330-span{display: block; background: #FFFFFF;}
.c330-time-077{margin: 0 0.55rem;}
.c330-time-05{margin: 0 0.65rem;}
.mms-pu{width: 6rem; height: 1.2rem; opacity: 0; transition: all 1.3s; -moz-transition: all 1.3s; -webkit-transition: all 1.3s; -o-transition: all 1.3s; margin-top: 0; position: fixed; top: 0; left: 0;}
.mms-pu:hover {opacity: 1;}
</style>
<!-- 引入jQuery 2.0+ -->
<script src="js/jquery-2.2.4.min.js"></script>
<!-- 引入YDUI脚本 -->
<script src="js/ydui.js"></script>
<script>
//秒杀哦倒计时
//1.这是当前时间 函数 strae
function xian(){
function p(s) { return s < 10 ? '0' + s: s; }
var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
//获取当前日
var date=myDate.getDate();
var h=myDate.getHours(); //获取当前小时数(0-23)
var m=myDate.getMinutes(); //获取当前分钟数(0-59)
var s=myDate.getSeconds();
var nowp=p(h);
var nowm=p(m);
var nows=p(s);
$(".c330-time .c330-time-01").text(nowp)
$(".c330-time .c330-time-02").text(nowm)
$(".c330-time .c330-time-03").text(nows)
$(".c330-time-ul span").addClass("c330-span")
$(".c330-time span").css("background","#FFFFFF")
}
//2. 这是任务结束时间 end
function calc(){
var now=new Date();//获取当前时间now
var s99=now.getSeconds();
//定义目标时间target:2016/2/23 17:30:00
var target=new Date("2018/3/30 21:00:00");
//自定义结束时间
function c(s) { return s < 10 ? '0' + s: s; }
var hs=target.getHours(); //获取当前小时数(0-23)
var ms=target.getMinutes(); //获取当前分钟数(0-59)
var ss=target.getSeconds();
var nowps=c(hs);
var nowms=c(ms);
var nowss=c(ss);
//获得now距离target的毫秒数ms
var s=parseInt((target-now)/1000);
if(parseInt(s+1)>0){//如果s>0，就继续计算
//天数
var dom=parseInt(s/3600/24);
dom<24&&(dom='0'+dom);
//计算距离target的小时数h: s/3600，再取整数部分
var h=parseInt(s/3600%24);
h<10&&(h='0'+h);//如果h<10，就在h前拼接0
//计算小时数以外的分钟数m: (s%3600)/60,再取整
var m=parseInt(s%3600/60);
m<10&&(m='0'+m);
s<10&&(s='0'+s);
timett=setTimeout(xian,1000);
timer=setTimeout(calc,1000);
}else{//否则
$(".c330-time-ul span").addClass("c330-span")
$(".c330-time .c330-time-01").text(nowps)
$(".c330-time .c330-time-02").text(nowms)
$(".c330-time .c330-time-03").text(nowss)
$(".mms-yping").attr({"src":"../img/end.mp3"})
$(".mms-yping").removeAttr("loop")
clearInterval(timett);
clearInterval(timer);
timett=null;
}
}
var timett=null;
var timer=null;
calc();
</script>
</body>
</html>
/**
*
* 获取当前时间
*/
function p(s) {
return s < 10 ? '0' + s: s;
}
var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
//获取当前日
var date=myDate.getDate();
var h=myDate.getHours(); //获取当前小时数(0-23)
var m=myDate.getMinutes(); //获取当前分钟数(0-59)
var s=myDate.getSeconds();
