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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
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
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Python实现包含min函数的栈
2016/04/29 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
keras之权重初始化方式
2020/05/21 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
银行贷款承诺书
2014/03/29 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书