首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript时间日期操作实例小结【5个示例】

Posted in Javascript onDecember 22, 2018

本文实例讲述了JavaScript时间日期操作。分享给大家供大家参考，具体如下：

本来想在网上找一些js实例来练练手，结果发现一本书《突破JavaScript编程实例五十讲》，看了下内容还不错，就下了下来；

后面又下了该书籍的源码，一看才发现这本书编的日期是2002年的，代码运行之后，有些代码可以运行，有些代码已经失效，原因是其所用的一些语言是已经淘汰的了。

其次就是由于是很早之前写的，那时候可能还没有css，js,html分离的想法，都是杂糅在一起的，看起来很不舒服。

还有就是，代码末尾都是不带分号的，还有各种不加关键字var的隐性全局变量等，都影响了程序的整洁性，简洁性。

于是就想，要不我把他的代码重新编写，来实现书中的要求。

在此，也对该书的作者马健兵等编著表示致敬，感谢他们的辛苦编著。

由于空间的限制，就不将js,css以单独文件存储了，全部都在html文件中，但已分离。

1、指定位置的时钟显示

时钟始终显示在网页的正中间，12小时制。

效果图：

JavaScript时间日期操作实例小结【5个示例】

源代码：

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>指定位置的时钟</title>
 <style>
  body{
   font-size: 30px;
   font-family: Arial;
   background: #fef4d9;
  }
  #Current-time{
   color:#66ff00;
   font-size: 30px;
  }
  #liveclock{
   position:absolute;
   top:50%;
   left: 50%;
   width: 250px;
   height: 100px;
   margin: -50px 0 0 -125px;
  }
  p{
   text-align: center;
   color:#ff00ff;
   margin: 0px;
  }
 </style>
 </head>
 <body>
  <div id="liveclock" >
   <div id="show"></div>
  </div>
  <script >
   function display()
   {
    var Digital=new Date();
    var hours=Digital.getHours();
    var minutes=Digital.getMinutes();
    var seconds=Digital.getSeconds();
    var dn="AM";
    if(hours>12)  //改成12小时制的
    {
     dn="PM";
     hours=hours-12;
    }
    if(hours==0)
     hours=12;
    if(minutes<=9)
     minutes="0"+minutes; //改成两位数的显示
    if(seconds<=9)
     seconds="0"+seconds;
   var myclock="<b><p id='Current-time'>Current time is:</p><p>"+hours+":"+minutes+":"+seconds+" "+dn+"</p></b>";
   var liveclock=document.getElementById("liveclock");
     liveclock.innerHTML=myclock;
   setTimeout("display()",1000);
   }
   display();
  </script>
 </body>
</html>

2、表针式时钟

由于书上的代码太老了，看不懂，自己重新写了一份。效果图如下：

JavaScript时间日期操作实例小结【5个示例】

源代码：

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>表针式时钟</title>
  <style>
  body{
   background: #fef4d9;
  }
  #time{
   position: absolute;
   width: 212px;
   height: 216px;
   top:50%;
   left: 50%;
   margin: -108px 0 0 -106px;
   border: 2px solid yellow;
  }
  .timeNum{
   position: absolute;
  }
  #pt0{
   position: absolute;
   top:20px;
   left: 105px;
   border: 4px solid red;
   height: 90px;
   z-index: 1px;
  }
  #pt1{
   position: absolute;
   top:35px;
   left: 105px;
   border: 4px solid blue;
   height: 75px;
   z-index: 100px;
  }
  #pt2{
   position: absolute;
   top:50px;
   left: 105px;
   border: 4px solid yellow;
   height: 60px;
   z-index: 110px;
  }
  </style>
 </head>
 <body>
  <div id="time">
   <div id="c0" class="timeNum" > </div>
   <div id="c1" class="timeNum"><b>1</b></div>
   <div id="c2" class="timeNum"><b>2</b></div>
   <div id="c3" class="timeNum"><b>3</b></div>
   <div id="c4" class="timeNum"><b>4</b></div>
   <div id="c5" class="timeNum"><b>5</b></div>
   <div id="c6" class="timeNum"><b>6</b></div>
   <div id="c7" class="timeNum"><b>7</b></div>
   <div id="c8" class="timeNum"><b>8</b></div>
   <div id="c9" class="timeNum"><b>9</b></div>
   <div id="c10" class="timeNum"><b>10</b></div>
   <div id="c11" class="timeNum"><b>11</b></div>
   <div id="c12" class="timeNum"><b>12</b></div>
   <div id="pt0" > </div>
   <div id="pt1" ></div>
   <div id="pt2" ></div>
  </div>
 </body>
 <script language=javascript>
  function getid(id){
   return document.getElementById(id);
  }
  //将数字以圆形的形式显示在屏幕上。根据三角函数的计算
  function clockNum(){
   for (var i=1; i<13;i++){
    var c1=getid("c"+i);
    angle=i*30/360*Math.PI*2;
    c1.style.top=0+(100-Math.cos(angle)*100)+"px";
    c1.style.left=100+Math.sin(angle)*100+"px";
   }
  }
  function clockRotate(){
   //获取当前的时间
   var start= new Date();
   var H=start.getHours();
   var M=start.getMinutes();
   var S=start.getSeconds();
   //设置其旋转的角度，分针每次6度，秒针每次6度，时针每次0.5度
   var mDu=M*6;
   var hDu=M*0.5+H*30;
   var sDu=S*6;
   var pt0=getid("pt0");
   var pt1=getid("pt1");
   var pt2=getid("pt2");
   //设置其绕末端旋转，宽度是在中间，高度是在整个高度的末尾，采用百分数的形式
   pt0.setAttribute('style',''+'transform:rotate('+ sDu +'deg); '+'transform-origin: center 93%;');
   pt1.setAttribute('style',''+'transform:rotate('+ mDu +'deg); '+'transform-origin: center 94%;');
   pt2.setAttribute('style',''+'transform:rotate('+ hDu +'deg); '+'transform-origin: center 95%;');
  }
  //每隔1毫秒检测一次
  setInterval(clockRotate,100);
  function init(){
   clockNum();
  }
   init();
  </script>
</html>

3、带按钮开关的form时钟

采用按钮的形式进行控制，按下开，显示时间和日期，按下关，则清空。效果图如下

JavaScript时间日期操作实例小结【5个示例】

源代码：

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>带按钮开关的Form时钟</title>
  <style>
   body{
    background: #aebcdf;
   }
   form{
    position:absolute;
    left:50;
    top:50;
    z-index:5;
   }
   input{
    color:red;
   }
   input[type="text"]{
    color: black;
   }
   .center{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid yellow;
    width: 220px;
    height: 42px;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="center">
  <form name="clock" >
   <input type="text" name="disp" value="" size=30 onFocus="this.blur()" ><br>
   <input type="button" name="rad" value="off" id="offbtn" >关
   <input type="button" name="rad" value=" on" id="onbtn">开
  </form>
  <div>
 </body>
 <script>
   //公共事件
   var common={
    //获取id
    getid:function (id){
     return document.getElementById(id);
    },
    //绑定事件
    on:function (element,eventName,listener){
     if (element.addEventListener){
       element.addEventListener(eventName,listener,false);
     }
     else if (element.attachEvent){
       element.attachEvent('on'+eventName,listener);
     }
     else
       element['on'+eventName]=listener;
    },
   }
   //时间的方法与属性
   var time={
    //用来标记是开还是关，0表示关
    enabled:0,
    //存储星期
    day:["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
    //设定和显示时间
    //注意中间用了toLocaleString();
    Time_Set:function ()
    {
     var today = new Date();
     TM=window.setTimeout('time.Time_Set()', 1000);
     var timeStr=today.toLocaleString()+" "+time.day[today.getDay()];
     document.clock.disp.value = timeStr;
     console.log(today.toLocaleString());
    },
   }
   //全局定时函数名字
   var TM;
   //点击开事件
   var onbtn=common.getid("onbtn");
   common.on(onbtn,'click',function(){
    if(time.enabled == 0)
    {
     time.Time_Set();
     time.enabled = 1;
    }
   });
   //点击关事件
   var offbtn=common.getid("offbtn");
   common.on(offbtn,'click',function(){
    if( time.enabled==1 )
    {
     document.clock.disp.value='';
     clearTimeout( TM );
     time.enabled = 0;
    }
   });
  </script>
</html>

4、年龄提示器

网页打开时依次弹出3个输入对话框，分别需要你输入你的出生日期（年月日），然后显示内容，显示你的出生年月，距离下一次你的生日还有多少时间，以及你活了多少时间。效果图：

JavaScript时间日期操作实例小结【5个示例】

源代码：

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>年龄提示器</title>
  <style>
  div{
   position: absolute;
   top:50%;
   left: 50%;
   transform:translate(-50%,-50%);
   width: 375px;
   height: 200px;
   border: 2px solid red;
   padding: 20px;
  }
  p{
   margin: 0;
   margin-bottom: 10px;
  }
  input{
   margin-bottom: 10px;
  }
  </style>
 </head>
 <body bgcolor="f9fcb6" >
  <div>
   <form>
    <p id="birday"></p>
    <p id="age"></p>
    <input type="text" name="nextYear" size="47" value="">
    <p>I've been alive for...</p>
    <input type="text" name="liveYear" size="47" value="">
    <p>您已在本站停留了</p>
    <input type=text name="input1" size=10 value="">
    <br>
   </form>
  </div>
 </body>
 <script >
   function getid(id){
    return document.getElementById(id);
   }
   var timerID=window.setTimeout("showtime()",1);
   //弹出输入框，获取用户的出生日期,注意要把日期转化为数字
   var bMonth =parseInt(prompt('Which month were you born in?(月份)','1-12'));
   var bDate =parseInt(prompt('Which day were you born on?(天)','1-31'));
   var bYear =parseInt(prompt('Which year were you born in?(年份)','1900-'+new Date().getFullYear()));
   var tMonth = ['January','February','March','April','May','June','July','August','September','October','November','December'];
   var corrMonth = tMonth[bMonth-1];
   getid("birday").innerHTML=" I was born <b>"+corrMonth+", "+bDate+", "+bYear+"</b>. (<b>"+bMonth+"/"+bDate+"/"+bYear+"</b>)";
   //传入格式化后的时间，用来计算两个时间差，nextAgeDay > today
   function computeTime(nextAgeDay,today){
    var day={};
    var liveSec=nextAgeDay.getTime();
    var lTime = today.getTime();
    var daysec=24*60*60*1000;
    var hoursec=60*60*1000;
    var minsec=60*1000;
    var tt=(-lTime+liveSec);
    //计算时间差，天，小时，分，秒
    day._1day=Math.floor(tt/daysec);
    day._1hour=Math.floor((tt-day._1day*daysec)/hoursec);
    day._1min=Math.floor((tt-day._1day*daysec-day._1hour*hoursec)/minsec);
    day._1sec=Math.floor((tt-day._1day*daysec-day._1hour*hoursec-day._1min*minsec)/1000);
    return day;
   }
   //计算距离下一岁还有多少天的时候，可以采用与现在的秒数相减getTime;
   function showtime()
   {
     //获取当前日期
    var today = new Date();
    var month = today.getMonth() + 1;
    var date = today.getDate();
    var year = today.getFullYear();
    //计算下一次生日是哪一年
    var nextAgeYear;
    var yourAge = year - bYear;
    if (bMonth < month || ((bMonth == month) && (date > bdate))) {
     yourAge--;
      nextAgeYear=year+1;
     }
    else {
      nextAgeYear=year;
     }
     //下一年几岁
    var nextAge = yourAge + 1;
    //将下一次生日时间格式化，默认时间在00:00;计算距离下一次生日还还有多长时间
    var nextAgeDay = new Date(""+nextAgeYear+","+bMonth+", "+bDate+" , 00:00");
    var day=computeTime(nextAgeDay,today);
    //将出生日期时间格式化，默认时间在00:00;计算已经活了多久了
    var bornAgeDay = new Date(""+bYear+","+bMonth+", "+bDate+" , 00:00");
    var lday=computeTime(today,bornAgeDay);
    //将结果输出
    document.forms[0].nextYear.value =""+day._1day+"days, "+day._1hour+"hours, "+day._1min+"minutes, "+day._1sec+"seconds";
    getid("age").innerHTML=" I am <b>"+yourAge+"</b> years old, and will turn <b>"+nextAge+"</b> in:";
    document.forms[0].liveYear.value =""+lday._1day+"days, "+lday._1hour+"hours, "+lday._1min+"minutes, "+lday._1sec+"seconds";
    timerID = window.setTimeout("showtime()",1000);
   }
   //第三个输入框,计算停留时间
   var sec=0;
   var min=0;
   var hou=0;
   var idt=window.setTimeout("update();",1);
   function update()
   {
    if(sec==60){sec=0;min+=1;}
    if(min==60){min=0;hou+=1;}
    document.forms[0].input1.value=hou+"时"+min+"分"+sec+"秒";
    idt=window.setTimeout("update();",1000);
    sec++;
   }
  </script>
</html>

5、得到文件的最后修改时间

本节主要讲获取HTML文件的最后修改时间。效果如下，其实跟前面的例子很像。

JavaScript时间日期操作实例小结【5个示例】

源代码：

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>获得文件的最后修改时间</title>
  <style>
  body{
   background: yellow;
  }
  .center{
   position: absolute;
   top:50%;
   left: 50%;
   transform:translate(-50%,-50%);
   width: 300px;
   height: 110px;
   border: 2px solid red;
   padding: 10px;
  }
  p{
   text-align: center;
   margin: 0px;
   padding: 10px;
  }
  </style>
</head>
<body>
 <script>
  //获得文件的格式化最后修改时间
  function DocDate()
  {
  var StrofLastMod = document.lastModified;
  //获得文件的最后修改时间，它是一个string类型的变量。
  var months = ["January","February","March","April","May","June","July","August", "September","October","November","December"]; //月份名变量，供转换。
  var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];//星期名变量，供转换
  var c = ":"; //用来分隔时，分，秒。
  var mdate =new Date(StrofLastMod);
  var month = months[mdate.getMonth()];
  var date = mdate.getDate();
  var year = mdate.getFullYear();
  var day = days[mdate.getDay()];
  var minutes=mdate.getMinutes();
  var hours= mdate.getHours();
  var seconds=mdate.getSeconds();
  var miliSec=mdate.getMilliseconds();
   var dateStr = year+" "+month+" "+date+" "+day+" "+hours+c+minutes+c+seconds+"."+miliSec; //获得格式化的文件最后修改时间。
  return dateStr;
 }
 var div=document.createElement("div");
 div.className="center";
 var divson=document.createElement("div");
 divson.innerHTML="<p>This File is last updated at:</p><p>"+DocDate()+"</p><p>"+document.lastModified+"</p>";
 div.appendChild(divson);
 document.body.appendChild(div);
 </script>
</body>
</html>

PS：这里再为大家推荐几款比较实用的天数计算在线工具供大家使用：

在线日期/天数计算器：
http://tools.3water.com/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器：
http://tools.3water.com/jisuanqi/datecalc

在线日期天数差计算器：
http://tools.3water.com/jisuanqi/onlinedatejsq

在线天数计算器：
http://tools.3water.com/jisuanqi/datejsq

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript时间日期操作实例小结【5个示例】

- Author -

huansky

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
javascript cookies操作集合
Apr 12 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
前端编码规范（3）JavaScript 开发规范
Jan 21 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
一篇文章，教你学会Vue CLI 插件开发
Apr 17 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 #Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 #Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 #Javascript
Element input树型下拉框的实现代码
Dec 21 #Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 #Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 #Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 #Javascript
批处理(1) timestamp(1) 重复数据(2) GTID(1) T-SQL(1) 排序失效(1) Logrotate(1) ip连接(1) 临时表(1) 表变量(1)
You might like
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
Django自定义认证方式用法示例
2017/06/23 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python实现随机漫步方法和原理
2019/06/10 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
英国舒适型鞋履品牌：FitFlop
2017/05/17 全球购物
亚洲航空公司官方网站：AirAsia
2019/11/25 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
少先队入队活动方案
2014/02/08 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers