JavaScript利用Date实现简单的倒计时实例


Posted in Javascript onJanuary 12, 2017

介绍

Date对象,是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。Date在js中和Array类似,都是拥有自己的特殊方法的特殊对象。

创建 Date 对象的语法:

var myDate=new Date() //Date 对象会自动把当前日期和时间保存为其初始值。

获取倒计时之前,我们不妨先来看怎样获取当前时间吧!!!

function time(){
  var oDate = new Date();
  var year = oDate.getFullYear();
  var month = oDate.getMonth() + 1 ;
  var dDate = oDate.getDate();
  var day = oDate.getDay();
  var house = oDate.getHours();
  var minu = oDate.getMinutes();
  var sec = oDate.getSeconds();


  switch(day){
  case 1:
  day = '星期一';
  break;
  case 2:
  day = '星期二';
  break;
  case 3:
  day = '星期三';
  break;
  case 4:
  day = '星期四';
  break;
  case 5:
  day = '星期五';
  break;
  case 6:
  day = '星期六';
  break;
  case 0:
  day = '星期日';
  break;
  }

  function double( t ){
  if( t < 10 ){
   t = '0' + t;
  }
  return t;
  }


  document.body.innerHTML = year + '年' + month +'月'+ dDate + '日 ' + day + ' ' + double(house) +':'+ double(minu) +':' + double(sec);
 }
 time();
 setInterval(time,1000);

获取倒计时

     1、实现倒计时功能

     2、倒计时结束按钮可被点击,之前不可被点击

实例代码:

<!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>
</head>

<body>
<div id="lastTime">
 <span>0天 </span>
 <span>00: </span>
 <span>00: </span>
 <span>00 </span>
</div>
<br /><br />
<style type="text/css">
#btn{
 text-decoration: none;
 display: block;
 width: 100px;
 height: 35px;
 background: #ccc;
 text-align: center;
 line-height: 35px;
 color: #666;
}
#btn.btn{
 background: red;
 color: #fff;
 font-size: 20px;
 font-weight: bold;
}
</style>
<a href="javascript:;" id="btn">即将开抢!</a>
<script type="text/javascript">
 var oLt = document.getElementById("lastTime");
 var oBtn = document.getElementById("btn");
 time();
 var timer = setInterval( time , 1000 );
 function time(){
 var endTime = new Date('2017/01/13 00:00:00');//结束日期不得在当前日期之前
 var nowTime = new Date();
 var splus = endTime.getTime() - nowTime.getTime();
 //天 时 分 秒
 if( splus <= 1 ){
  clearInterval( timer );
  oBtn.className = 'btn';
  oBn.innerHTML = '开始秒杀!';
  oBtn.href = 'http://www.baidu.com';
  return;
 }else{
  oBtn.className = '';
 }
 var day = Math.floor( splus / 1000 / 60 / 60 / 24 );
 var hours = Math.floor( splus / 1000 / 60 / 60 % 24 );
 var min = Math.floor(splus / 1000 / 60 % 60);
 var sec = Math.floor(splus / 1000 % 60);
 oLt.innerHTML = day + '天 ' + double( hours ) + ':' + double( min ) + ':' + double( sec );

 function double( n ){
  if( n < 10 ){
  n = '0' + n;
  }
  return n;
 }
 }
</script>


</body>
</html>

效果图如下:

JavaScript利用Date实现简单的倒计时实例

JavaScript利用Date实现简单的倒计时实例

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
取得父标签
Nov 14 Javascript
javascript 树控件 比较好用
Jun 11 Javascript
jQuery示例收集
Nov 05 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
React组件的三种写法总结
Jan 12 #Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 #Javascript
jQuery命名空间与闭包用法示例
Jan 12 #Javascript
jquery实现百叶窗效果
Jan 12 #Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 #Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 #Javascript
js仿搜狐视频记录片列表展示效果
May 30 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
php 字符串函数收集
2010/03/29 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
JS跨域代码片段
2012/08/30 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python实现俄罗斯方块
2018/06/26 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python的缺点和劣势分析
2019/11/19 Python
python对文件的操作方法汇总
2020/02/28 Python
实例代码讲解Python 线程池
2020/08/24 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
语文教研活动总结
2014/07/02 职场文书
德能勤绩工作总结
2015/08/11 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
Python标准库pathlib操作目录和文件
2021/11/20 Python