首页
所有分类
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中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
js实现分割上传大文件
Mar 09 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
JavaScript 原型与原型链详情
Nov 02 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
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
Lifecycle(1) PostMapping(1) 小喇叭开始广播了(1) 温控(1) 内存泄露(1) ResNet50(1) Xception(1) 小喇叭(1) 微信(2) Spring(9)
You might like
PHP中MD5函数使用实例代码
2008/06/07 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
2018/07/26 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python实现员工管理系统
2018/01/11 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python打开使用的方法
2019/09/30 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
科沃斯机器人官网商城：Ecovacs
2016/08/29 全球购物
加工操作管理制度
2014/01/19 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
入党介绍人意见2015
2015/06/01 职场文书
Python机器学习之基础概述
2021/05/19 Python
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android