基于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 相关文章推荐
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
Angular网络请求的封装方法
May 22 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
用Node提供静态文件服务的方法
2018/07/06 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
python动态加载变量示例分享
2014/02/17 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python循环语句中else的用法总结
2016/09/11 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
python语言中有算法吗
2020/06/16 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
物业电工岗位职责
2013/11/20 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
干部个人考察材料
2014/12/24 职场文书
文明上网主题班会
2015/08/14 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
MySQL之select、distinct、limit的使用
2021/11/11 MySQL