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 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
浅谈JavaScript字符集
May 22 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
js中this对象用法分析
Jan 05 Javascript
JS运动特效之链式运动分析
Jan 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
附件名前加网站名
2008/03/23 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python同时处理多个异常的方法
2020/07/28 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
职称评定自我鉴定
2014/03/18 职场文书
毕业设计说明书
2014/05/07 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
用JS写一个发布订阅模式
2021/11/07 Javascript
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript