首页
所有分类
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 相关文章推荐
使用JS操作页面表格，元素的一些技巧
Feb 02 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
javascript中new关键字详解
Dec 14 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
js时间控件只显示年月
Jan 08 Javascript
微信小程序登录换取token的教程
May 31 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
微信小程序加载机制及运行机制图解
Nov 27 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) 并发(8) 字典(3) pip(1) Xpath(1) 爬虫(2) most_common(1) Counter(1) LOGO(1) SingleFlight(2)
You might like
PHP数据类型之布尔型的介绍
2013/04/28 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
js前端解决跨域问题的8种方案（最新最全）
2016/11/18 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python计算圆周率pi的方法
2015/07/11 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python生成器以及应用实例解析
2018/02/08 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
人工神经网络算法知识点总结
2019/06/11 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
法国综合购物网站：RueDuCommerce
2016/09/12 全球购物
香蕉共和国加拿大官网：Banana Republic加拿大
2018/08/06 全球购物
软件配置管理有什么好处
2015/04/15 面试题
市场部专员岗位职责
2013/11/30 职场文书
手工社团活动方案
2014/02/17 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
英文演讲稿开场白
2014/08/25 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
建筑工程催款函
2015/06/24 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android