jquery版的网页倒计时效果
2016-03-24 23:02
567 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery版的网页倒计时效果</title> <script type="text/javascript" src="jquery-2.2.2.min.js"></script> <script type="text/javascript"> $(function () { var time = 6000;//倒计时总秒数量 (function () { var intDiff = parseInt(time);//倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0;//时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; $('#day_show').html(day); $('#hour_show').html(hour); $('#minute_show').html(minute); $('#second_show').html(second); intDiff--; }, 1000); } $(function () { timer(intDiff); }); })(time) }) </script> </head> <body> <h1>网页上的倒计时</h1> <div class="time-item"> <span id="day_show">0天</span> <strong id="hour_show">0时</strong> <strong id="minute_show">0分</strong> <strong id="second_show">0秒</strong> </div> <!--倒计时模块--> <!--<script src="http://www.jq22.com/js/jq.js"></script>--> </body> </html>
相关文章推荐
- JQuery 怎么加载外部 CSS、JS 文件
- jQuery-弹窗登录
- jQuery复习:第五章
- jQuery mobile开发之页面(链接)跳转刷新问题
- 利用jquery高仿select下拉菜单效果
- jQuery学习笔记(5)-事件与事件对象
- jQuery
- jquery 选择器,模糊匹配
- jQuery easyui 和 ueditor结合的问题
- jQuery 获取遍历获取table中每一个tr中的第一个td
- jQuery--checkbox全选/取消全选
- jquery 中json数组的操作 增删改
- jquery判断checkbox是否选中及改变checkbox状态
- 引入jquery
- jQuery-validate 表单验证
- Ajax实战项目2 验证用户的唯一性 环境(Ajax+Jquery+struts2)
- jquery 滚动到指定位置触发动画
- django debug toolbar jquery加载配置
- 清空form表单下所有的input值-------------jquery
- 城市选择 jQuery实现