JavaScript Date对象应用实例分享


Posted in Javascript onOctober 30, 2017

本文实例为大家分享了js Date对象应用3个实例,供大家参考,具体内容如下

一.获取日期时间,秒数实时跳动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>date01</title>
  <style>
    #date{
      position: absolute;
      font-size: 30px;
      font-family: '微软雅黑';
      top:50%;
      left:50%;
      -webkit-transform:translate(-50%,-50%);
    }
  </style>
</head>
<body>
  <div id="date">2017.10.29</div>
  <script>
    window.onload = function(){
      showTime();
    }
    //checkTime(i)对分钟和秒进行判断,如果小于10,在其前补0.
    function checkTime(i){
      return i < 10? "0"+i:i;
    }
    function showTime(){
      var time = new Date();//日期对象
      console.log("new Date :"+time);
      var year_1 = time.getYear();//获得年份
      console.log("getYear(): "+year_1);
      var year_2 = time.getFullYear();//获得完整年份
      console.log("getFullYear(): "+year_2);
      var month = time.getMonth();//获得月份(0~11)
      console.log("getMonth(): "+month);
      var date = time.getDate();//获得日期(1~31)
      console.log("getDate(): "+date);
      var day = time.getDay();//星期几(0~6)
      console.log("getDay(): "+day)
      var hours = time.getHours();//小时(0~23)
      console.log("getHours(): "+hours);
      var min = time.getMinutes();//分钟(0~59)
      console.log("getMinutes(): "+min);
      var seconds = time.getSeconds();//秒
      console.log("getSeconds(): "+seconds);

      min = checkTime(min);
      seconds = checkTime(seconds);

      var weekday = new Array(7);
      weekday[0] = "星期天"; 
      weekday[1] = "星期一";
      weekday[2] = "星期二";
      weekday[3] = "星期三";
      weekday[4] = "星期四";
      weekday[5] = "星期五";
      weekday[6] = "星期六";

      var str_time = year_2 + "年" + (month+1) + "月" + date + "日" +" "+ weekday[day] +" "+ hours +":" + min +":" + seconds;

      document.getElementById('date').innerHTML = str_time;
      setTimeout(showTime,500);//每500ms执行一次,实现秒数实时跳动。
    }  
    
  </script>
</body>
</html>

二.高考倒计时功能(天)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>date02</title>
  <style>
    #date{
      position: absolute;
      font-size: 30px;
      font-family: '微软雅黑';
      top:50%;
      left:50%;
      -webkit-transform:translate(-50%,-50%);
    }
  </style>
</head>
<body>
  <div id="date">2017.10.29</div>
  <script>
    window.onload = function(){
      var now = new Date();//获取当前时间
      var timedate = new Date("2018,12,23");//截止时间
      //getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
      var date = timedate.getTime() - now.getTime();
      //Math.ceil()向上取整
      var time = Math.ceil(date/(24*60*60*1000));
      document.getElementById('date').innerHTML = time;

    }
  </script>
</body>
</html>

三.限时抢

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>date03</title>
  <style>
    #date{
      position: absolute;
      font-size: 30px;
      font-family: '微软雅黑';
      top:50%;
      left:50%;
      -webkit-transform:translate(-50%,-50%);
    }
  </style>
</head>
<body>
  <div id="date">2017.10.29</div>
  <script>
    window.onload = function(){
      showTime();

    }
    function checkTime(i){
      return i < 10? "0"+i:i;
    }
    function showTime(){
      var now = new Date();//获取当前时间
      var timedate = new Date("2017/10/30,24:00:00");//截止时间
      //getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
      var leftTime = (timedate.getTime() - now.getTime())/1000;
      var d = checkTime(parseInt(leftTime/(24*60*60)));
      var h = checkTime(parseInt(leftTime/(60*60)%24));
      var m = checkTime(parseInt(leftTime/60%60));
      var s = checkTime(parseInt(leftTime%60));
      var time = d + "天" + h + "小时" + m + "分钟" + s + "秒";
      document.getElementById('date').innerHTML = time;
      setTimeout(showTime,500);
    }
  </script>
</body>
</html>

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

Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
js文字横向滚动特效
Nov 11 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
详解ES6中class的实现原理
Oct 03 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 #Javascript
Angularjs按需查询实例代码
Oct 30 #Javascript
Vue中正确使用jQuery的方法
Oct 30 #jQuery
ES6 javascript中Class类继承用法实例详解
Oct 30 #Javascript
轻松理解vue的双向数据绑定问题
Oct 30 #Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 #Javascript
You might like
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
PDO::errorInfo讲解
2019/01/28 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
javascript常见操作汇总
2014/09/03 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
python绘制雪景图
2019/12/16 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
类和结构的区别
2012/08/15 面试题
村官工作鉴定评语
2014/01/27 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
介绍信的写法
2015/01/31 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
学习计划是什么
2019/04/30 职场文书