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 object and DOM element
Apr 15 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
js图片预加载示例
Apr 30 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
Javascript之Date对象详解
Jun 07 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
vue+element表格导出为Excel文件
Sep 26 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php中的观察者模式
2010/03/24 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
javascript高级学习笔记整理
2011/08/14 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
javascript实现下雨效果
2017/03/27 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
vue debug 二种方法
2018/09/16 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python中进程和线程的区别详解
2017/10/29 Python
python机器学习之神经网络(三)
2017/12/20 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
保险公司早会主持词
2014/03/22 职场文书
教师求职信范文
2014/05/24 职场文书
学校教师读书活动总结
2014/07/08 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis