仿一品店活動倒計時時間滾動效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<style type="text/css">
*{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>javascript
<body>
<div class="timebox" >
<div class="countime">
<p id="countDownTip">距結束</p>
<div class="countdown clearfix">
<!--<div class="cd1"></div>-->
<div class="cd2">
<div class="tm h1">
<span>
<i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i>
</span>
</div>
<div class="tm h2">
<span>
<i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i>
</span>
</div>
<div class="tm it1">:</div>
<div class="tm m1">
<span>
<i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i>
</span>
</div>
<div class="tm m2">
<span>
<i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i>
</span>
</div>
<div class="tm it2">:</div>
<div class="tm s1">
<span>
<i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i>
</span>
</div>
<div class="tm s2">
<span>
<i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i>
</span>
</div>
</div>
</div>
<div class="tuan_btn">
<a id="rr" href="#" target="_blank" >當即搶購</a>
</div>
</div>
</div>
<script type="text/javascript">
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>css
</body>
</html>
html
- 1. 活動倒計時腳本
- 2. 仿QQ空間長圖滾動效果
- 3. 設置一個活動倒計時
- 4. javascript - 活動倒計時(天、時、分、秒)
- 5. 【筆記 倒計時效果】
- 6. js倒計時效果
- 7. 實踐 - 倒計時效果
- 8. Axure之倒計時效果
- 9. jQuery中倒計時效果
- 10. JavaScript倒計時效果
- 更多相關文章...
- • ionic 滾動條 - ionic 教程
- • SQLite 日期 & 時間 - SQLite教程
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 活動倒計時腳本
- 2. 仿QQ空間長圖滾動效果
- 3. 設置一個活動倒計時
- 4. javascript - 活動倒計時(天、時、分、秒)
- 5. 【筆記 倒計時效果】
- 6. js倒計時效果
- 7. 實踐 - 倒計時效果
- 8. Axure之倒計時效果
- 9. jQuery中倒計時效果
- 10. JavaScript倒計時效果