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 相关文章推荐
js的[defer]和[async]属性
Nov 24 Javascript
js检测用户输入密码强度
Oct 22 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP中实现图片的锐化
2006/10/09 PHP
PHP 选项及相关信息函数库
2006/12/04 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python中GIL的使用详解
2018/10/03 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
Java如何读取CLOB字段
2013/10/10 面试题
高一历史教学反思
2014/01/13 职场文书
大学生就业策划书范文
2014/04/04 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
保护水资源的标语
2014/06/17 职场文书
绘画专业自荐信
2014/07/04 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
白鹤梁导游词
2015/02/06 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
Java SSM配置文件案例详解
2021/08/30 Java/Android