仿一品店活动倒计时时间滚动效果-白红宇

仿一品店活动倒计时时间滚动效果

阅读量：6307 次

发布时间：2019-06-22

本文共 3175 字，大约阅读时间需要 10 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>无标题文档</title>

*{padding:0; margin:0;}

body{font:12px Arial,Helvetica,sans-serif}

.timebox{height: 104px;overflow: hidden;width: 152px; margin:50px auto; padding:10px 25px; border:1px solid red;}

#countDownTip{margin-bottom:5px;}

.countdown{height: 40px;position: relative; margin:auto;}

.tm{font-size: 38px;height: 40px;line-height: 40px;overflow: hidden;position: absolute;width: 20px;}

.tm span{display: block;position: absolute;width: 20px;}

.tm i{display: block;font-style: normal;height: 40px;width: 20px;}

.h1{left: 3px;}

.h2{left: 23px;}

.it1{left: 46px;}

.m1{left: 56px;}

.m2{left: 76px;}

.it2{left: 96px;}

.s1{left: 106px;}

.s2{left: 126px;}

.tuan_btn{margin-top: 5px; width:145px; height:30px; background-color:red; color:#FFF; font-size:18px; font-weight:bold; text-align:center; line-height:30px;}

.tuan_btn a{color:#FFF; text-decoration:none;}

.clearfix:after{content:""; line-height:0; overflow:hidden; display:block; clear:both;}

.clearfix{zoom:1;}

</style>

</head>

<body>

<span>

</span>

</div>

<span>

</span>

</div>

<span>

</span>

</div>

<span>

</span>

</div>

<span>

</span>

</div>

<span>

</span>

</div>

</div>

function showCount(year,month,day,hour){

var now=new Date();

var endDate=new Date(year,month-1,day,hour);

var leaveTime=endDate.getTime()-now.getTime();

var leaveSecond=parseInt(leaveTime/1000);

var _H=Math.floor(leaveSecond/3600);

var _M=Math.floor((leaveSecond-_H*3600)/60);

var _S=Math.floor(leaveSecond-_H*3600-_M*60);

var h1=parseInt(_H/10);

var h2=_H%10;

var m1=parseInt(_M/10);

var m2=_M%10;

var s1=parseInt(_S/10);

var s2=_S%10;

$(".h1 span").animate({"top":-(h1*40)});

$(".h2 span").animate({"top":-(h2*40)});

$(".m1 span").animate({"top":-(m1*40)});

$(".m2 span").animate({"top":-(m2*40)});

$(".s1 span").animate({"top":-(s1*40)});

$(".s2 span").animate({"top":-(s2*40)});

}

showCount(2014,7,20,18);

window.setInterval(function(){showCount(2014,7,20,18);},1000);

</script>

</body>

</html>

转载于:https://my.oschina.net/u/879103/blog/292535

你可能感兴趣的文章

git常用命令记录

查看>>

IBM发布新一代云计算工具包MobileFirst Foundation

查看>>

唯品会HDFS性能挑战和优化实践

查看>>

大规模学习该如何权衡得失？解读NeurIPS 2018时间检验奖获奖论文

Visual Studio 15.4发布，新增多平台支持

查看>>

有赞透明多级缓存解决方案（TMC）设计思路

查看>>

如何设计高扩展的在线网页制作平台

查看>>

Git 2.5增加了工作树、改进了三角工作流、性能等诸多方面

查看>>

Swift 5将强制执行内存独占访问

查看>>

中台之上（二）：为什么业务架构存在20多年，技术人员还觉得它有点虚？

查看>>

深度揭秘腾讯云低功耗广域物联网LPWAN 技术及应用

查看>>

与Jeff Sutherland谈敏捷领导力

查看>>

More than React（四）HTML也可以静态编译？

查看>>

React Native最佳学习模版- F8 App开源了