javascript實(shí)現(xiàn)促銷倒計(jì)時(shí)+fixed固定在底部
更新時(shí)間:2013年09月18日 16:00:24 作者:
一個(gè)不錯(cuò)的示例使用javascript實(shí)現(xiàn)的促銷倒計(jì)時(shí)且同時(shí)擁有fixed固定在底部,而且兼容ie6,喜歡的朋友可以參考下
復(fù)制代碼 代碼如下:
<!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>無標(biāo)題文檔</title>
<style>
#lefttime3 { background: url(timerbg.jpg) no-repeat left center; width:1018px;height:55px;
font-size:40px;line-height: 55px;font-family: MS Yahei,Microsoft YaHei;
color: #f00;color:rgb(255,205,1);
}
#day{ margin-left: 592px;}
#hour { margin-left:40px; }
#min { margin-left: 39px;}
#sec { margin-left: 37px;}
</style>
<script>
var djs = function(d,o)
{
var f = {
zero: function(n){
var n = parseInt(n, 10);
if(n > 0) {
if(n <= 9) n = '0' + n;
return String(n);
} else {
return '00';
}
},
run: function(){
var ts = Math.round((new Date(d).getTime() - new Date().getTime()) / 1000);
if(o && ts > 0)
{
var yy = Math.floor(ts / 31556926);
var mm = Math.floor(ts / 2629744); mm = mm > 0 ? mm%12 : '00';
var dd = Math.floor(ts / 86400); dd = dd > 0 ? dd%30 : '00';
var hh = Math.floor(ts / 3600); hh = hh > 0 ? hh%24 : '00';
var ii = Math.floor(ts / 60); ii = ii > 0 ? ii%60 : '00';
var ss = Math.floor(ts % 60);
if(o.y) o.y.innerHTML = f.zero(yy);
if(o.m) o.m.innerHTML = f.zero(mm);
if(o.d) o.d.innerHTML = f.zero(dd);
if(o.h) o.h.innerHTML = f.zero(hh);
if(o.i) o.i.innerHTML = f.zero(ii);
if(o.s) o.s.innerHTML = f.zero(ss);
}
window.setTimeout(f.run,1000);
}
}
f.run();
}
function ieFixed(id)
{
var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
var obj = document.getElementById(id).style;
if (isIE6 && obj)
{
obj.position = "absolute";
obj.bottom = "0px";
obj.right = "0px";
var tm = window.setInterval(function(){
obj.marginBottom = "0px";
obj.left = ( document.documentElement.scrollLeft + document.documentElement.clientWidth - 312) + "px";
}, 80);
}
}
</script>
</head>
<body style="height:300000px;">
<div id="lll" style="margin:10px;padding:20px; border:solid 2px #DDD; background:#fc6;height:300px;"></div>
<div id="lefttime3" style="position:fixed;bottom:0px;right:0px;"><span id="day"></span><span id="hour"></span><span id="min"></span><span id="sec"></span></div>
<script>
var d = new Date().getTime() + 3600*24*1000;
var d = 1379572933131;
var o = {
d: document.getElementById('day'),
h: document.getElementById('hour'),
i: document.getElementById('min'),
s: document.getElementById('sec')
}
djs(d,o);//倒計(jì)時(shí)
ieFixed('lefttime3'); //固定在底部
</script>
</body>
</html>
1)兼容IE6
2)自動(dòng)倒計(jì)時(shí),輸入的數(shù)字必須是時(shí)間,單位毫秒。
您可能感興趣的文章:
- javascript倒計(jì)時(shí)功能實(shí)現(xiàn)代碼
- javascript 實(shí)現(xiàn) 秒殺,團(tuán)購 倒計(jì)時(shí)展示的記錄 分享
- Javascript倒計(jì)時(shí)頁面跳轉(zhuǎn)實(shí)例小結(jié)
- JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法
- JavaScript實(shí)現(xiàn)的一個(gè)倒計(jì)時(shí)的類
- C#結(jié)合JavaScript實(shí)現(xiàn)秒殺倒計(jì)時(shí)的方法
- JavaScript實(shí)現(xiàn)簡單的數(shù)字倒計(jì)時(shí)
- javascript實(shí)現(xiàn)倒計(jì)時(shí)并彈窗提示特效
- javascript實(shí)現(xiàn)倒計(jì)時(shí)(精確到秒)
- javascript實(shí)現(xiàn)下班倒計(jì)時(shí)效果的方法(可桌面通知)
- javascript頁面倒計(jì)時(shí)實(shí)例
- javascript同步服務(wù)器時(shí)間和同步倒計(jì)時(shí)小技巧
相關(guān)文章
盤點(diǎn)javascript 正則表達(dá)式中 中括號的【坑】
下面小編就為大家?guī)硪黄P點(diǎn)javascript 正則表達(dá)式中 中括號的【坑】。小編覺得總結(jié)的不錯(cuò)?,F(xiàn)在分享給大家,希望能給大家一個(gè)參考2016-03-03JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法,結(jié)合實(shí)例形式分析了javascript數(shù)獨(dú)判斷的原理及相關(guān)算法實(shí)現(xiàn)、使用操作技巧,需要的朋友可以參考下2019-02-02yolov5項(xiàng)目部署+微信小程序前端展示的全過程
YOLOV5模型從發(fā)布到現(xiàn)在都是炙手可熱的目標(biāo)檢測模型,被廣泛運(yùn)用于各大場景之中,下面這篇文章主要給大家介紹了關(guān)于yolov5項(xiàng)目部署+微信小程序前端展示的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11Bootstrap 網(wǎng)站實(shí)例之單頁營銷網(wǎng)站
這篇文章主要介紹了Bootstrap 網(wǎng)站實(shí)例之單頁營銷網(wǎng)站的相關(guān)資料,本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10javascript實(shí)現(xiàn)日歷控件(年月日關(guān)閉按鈕)
經(jīng)常使用google的朋友一定對google絢麗的日歷控件記憶猶新吧,那我們也來實(shí)現(xiàn)一個(gè),雖然功能和效果比不上,但重要的是實(shí)現(xiàn)的過程2012-12-12微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到某個(gè)位置便自動(dòng)定位某個(gè)tr
這篇文章主要介紹了js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到某個(gè)位置便自動(dòng)定位某個(gè)tr的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01