基于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 学习技巧
Feb 17 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
微信小程序 navbar实例详解
May 11 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
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抓取及分析网页的方法详解
2016/04/26 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
javascript操作css属性
2013/12/30 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
django如何实现视图重定向
2019/07/24 Python
Python的Lambda函数用法详解
2019/09/03 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
Python中requests库的用法详解
2022/06/05 Python