基于javascript显示当前时间以及倒计时功能


Posted in Javascript onMarch 18, 2016

自我练习,顺便分享给大家的一段js原生代码。

Date 对象用于处理日期和时间。
Date()  返回当日的日期和时间。
getDate()  从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()  从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()  从 Date 对象返回月份 (0 ~ 11)。
getFullYear()  从 Date 对象以四位数字返回年份。
getYear()  请使用 getFullYear() 方法代替。
getHours()  返回 Date 对象的小时 (0 ~ 23)。
getMinutes()  返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()  返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()  返回 Date 对象的毫秒(0 ~ 999)。
getTime()  返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()  返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()  根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()  根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()  根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()  根据世界时从 Date 对象返回四位数的年份。
getUTCHours()  根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()  根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()  根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()  根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()  返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate()  设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()  设置 Date 对象中月份 (0 ~ 11)。
setFullYear()  设置 Date 对象中的年份(四位数字)。
setYear()  请使用 setFullYear() 方法代替。
setHours()  设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()  设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()  设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()  设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()  以毫秒设置 Date 对象。
setUTCDate()  根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()  根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()  根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours()  根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()  根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()  根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()  根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()  返回该对象的源代码。
toString()  把 Date 对象转换为字符串。
toTimeString()  把 Date 对象的时间部分转换为字符串。
toDateString()  把 Date 对象的日期部分转换为字符串。
toGMTString()  请使用 toUTCString() 方法代替。
toUTCString()  根据世界时,把 Date 对象转换为字符串。
toLocaleString()  根据本地时间格式,把 Date 对象转换为字符串。
toLocaleTimeString()  根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleDateString()  根据本地时间格式,把 Date 对象的日期部分转换为字符串。
UTC()  根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()  返回 Date 对象的原始值。

具体实现代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>原生js 当前时间 倒计时代码</title>
 <style>
 *{margin:0;padding:0;}
 body{text-align:center;}
 .text{margin-top:150px;font-size:14px;}
 </style>
 <script>
  window.onload=function(){   
   getMyTime(); 
   getMyTime1(); 
  }
  //1.前面补0
  function p(n){
   return n<10?'0'+n:n;
  }
  //2.倒计时
  function getMyTime(){   
   var startDate=new Date();
   var endDate=new Date('2017/4/17 11:15:00');
   var countDown=(endDate.getTime()-startDate.getTime())/1000;
   var day=parseInt(countDown/(24*60*60));
   var h=parseInt(countDown/(60*60)%24);
   var m=parseInt(countDown/60%60);
   var s=parseInt(countDown%60);    
   document.getElementById('time').innerHTML=day+'天'+p(h)+'时'+p(m)+'分'+p(s)+'秒';
   setTimeout('getMyTime()',500);
   if(countDown<=0){
    document.getElementById('time').innerHTML='活动结束'; 
   }    
  }
  //3.当前时间
  function getMyTime1(){
   var myDate=new Date();
   var year=myDate.getFullYear();
   var month=myDate.getMonth()+1;
   var day=myDate.getDate();
   var week=myDate.getDay();
   var array=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];
   var hour=myDate.getHours();
   var minute=myDate.getMinutes();
   var second=myDate.getSeconds();
   document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+' '+array[week]+' '+p(hour)+':'+p(minute)+':'+p(second);
   setTimeout('getMyTime1()',500);
  }
 </script>
</head>
<body>
 <div class="text">
  <p>倒计时间:<span id="time"></span></p>
  <p>当前时间:<span id="time1"></span></p> 
 </div>
</body>
</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

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

Javascript 相关文章推荐
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
js中el表达式的使用和非空判断方法
Mar 28 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
jQuery.deferred对象使用详解
Mar 18 #Javascript
JS中的二叉树遍历详解
Mar 18 #Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 #Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 #Javascript
Javascript的表单验证-初识正则表达式
Mar 18 #Javascript
Javascript的表单验证-提交表单
Mar 18 #Javascript
Javascript的表单与验证-非空验证
Mar 18 #Javascript
You might like
PHP两种快速排序算法实例
2015/02/15 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
总结python爬虫抓站的实用技巧
2016/08/09 Python
Django密码存储策略分析
2020/01/09 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
python 8种必备的gui库
2020/08/27 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
建筑施工安全生产责任书
2014/07/22 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
通知书大全
2015/04/27 职场文书
公司文体活动总结
2015/05/07 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
python - timeit 时间模块
2021/04/06 Python
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
sql注入报错之注入原理实例解析
2022/06/10 MySQL
Go语言测试库testify使用学习
2022/07/23 Golang