基于Javascript倒计时效果


Posted in Javascript onDecember 22, 2016

本文实例为大家分享了js倒计时效果的具体代码,供大家参考,具体内容如下

Index.html

<!DOCTYPE html >
<html>
<head>
<title>倒计时</title>

<style type="text/css">
  .colockbox
  {
   width:500px;
   height:20px; 
   color:#000000;
  }

  .colockbox span
  {
  float:left;display:block;
  width:20px;
  height:20px;
  line-height:20px;
  font-size:18px; 
  font-weight:bold;
  text-align:center;
  color:#ffffff; 
  text-indent:3px; 
  }

  .square 
  {
   float:left;
   width:26px;
   height:20px;
   background-color:#222222;
   border-radius:3px;
   padding:0px;
   margin-right:5px;
  }

</style>

<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
 countDown("2016/12/25 23:00:00","#colockbox1");
});
function countDown(time,id){
 var day_elem = $(id).find('.day');
 var hour_elem = $(id).find('.hour');
 var minute_elem = $(id).find('.minute');
 var second_elem = $(id).find('.second');
 var end_time = new Date(time).getTime(),//月份是实际月份-1 
 sys_second = (end_time-new Date().getTime())/1000; 
 var timer = setInterval(function(){
  if (sys_second > 1) {
   sys_second -= 1;
   var day = Math.floor((sys_second / 3600) / 24);
   var hour = Math.floor((sys_second / 3600) % 24);
   var minute = Math.floor((sys_second / 60) % 60);
   var second = Math.floor(sys_second % 60);
   day_elem && $(day_elem).text(day);//计算天
   $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
   $(minute_elem).text(minute<10?"0"+minute:minute);//计算分钟
   $(second_elem).text(second<10?"0"+second:second);//计算秒杀
  } else { 
   clearInterval(timer);
  }
 }, 1000);
}
</script>
</head>
<body>

<div class="colockbox" id="colockbox1">


<div class="square"> 
<span class="day">00</span> 
</div>
<span style="color:gray;font-size:15px; float:left;">天</span>

<div class="square"> 
<span class="hour">00</span> 
</div>
<span style="color:gray;font-size:15px; float:left;">时</span>

<div class="square"> 
<span class="minute">00</span> 
</div>
<span style="color:gray;font-size:15px; float:left;">分</span>

<div class="square"> 
<span class="second">00</span> 
</div>
<span style="color:gray;font-size:15px; float:left;">秒</span>
</div>
</body>
</html>

运行结果如图:

基于Javascript倒计时效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
js生成word中图片处理方法
Jan 06 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
详解angular应用容器化部署
Aug 14 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
JS前端加密算法示例
Dec 22 #Javascript
jQuery手指滑动轮播效果
Dec 22 #Javascript
自动适应iframe右边的高度
Dec 22 #Javascript
微信小程序 自己制作小组件实例详解
Dec 22 #Javascript
JS正则子匹配实例分析
Dec 22 #Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 #Javascript
jQuery无缝轮播图代码
Dec 22 #Javascript
You might like
php+ajax简单实现全选删除的方法
2016/12/06 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python新手学习标准库模块命名
2020/05/29 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
售后专员岗位职责
2013/12/08 职场文书
考试不及格检讨书
2014/01/09 职场文书
班级安全教育实施方案
2014/02/23 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
上课说话检讨书
2015/01/27 职场文书
鲁迅故居导游词
2015/02/05 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang