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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JQuery live函数
Dec 24 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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数据库抽象层 PDO
2011/05/07 PHP
调整PHP的性能
2013/10/30 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php单例模式的简单实现方法
2016/06/10 PHP
php表单处理操作
2017/11/16 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
如何开发一个JQuery插件
2016/07/28 面试题
毕业生自荐书
2014/02/03 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
志愿者事迹材料
2014/12/26 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
党员转正大会主持词
2015/07/02 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android