javascript实现促销倒计时+fixed固定在底部


Posted in Javascript onSeptember 18, 2013
<!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> 
<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);//倒计时 
ieFixed('lefttime3'); //固定在底部 
</script> 
</body> 
</html>

1)兼容IE6
2)自动倒计时,输入的数字必须是时间,单位毫秒。
Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
jQuery链使用指南
Jan 20 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
详解webpack分包及异步加载套路
Jun 29 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
jquery等宽输出文字插件使用介绍
Sep 18 #Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 #Javascript
JSON 数字排序多字段排序介绍
Sep 18 #Javascript
json数据与字符串的相互转化示例
Sep 18 #Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 #Javascript
jQuery extend 的简单实例
Sep 18 #Javascript
Javascript中Event属性搜集整理
Sep 17 #Javascript
You might like
PHP完整的日历类(CLASS)
2006/11/27 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
jquery easyui使用心得
2014/07/07 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
详解使用python crontab设置linux定时任务
2016/12/08 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
python元组拆包实现方法
2021/02/28 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
初三新学期计划书
2014/05/03 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
个人求职信格式范文
2015/03/20 职场文书
志愿服务心得体会
2016/01/15 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书