javascript实例——时间日期篇(包含5个实例)

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

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

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

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

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

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

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

1、指定位置的时钟显示

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

效果图：

源代码：

<!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>

View Code

2、表针式时钟

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

源代码：

<!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>

View Code

3、带按钮开关的form时钟

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

源代码：

<!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>

View Code

4、年龄提示器

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

源代码：

<!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>

View Code

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

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

源代码：

<!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>

View Code

posted @ 2016-04-26 15:59 huansky 阅读(1867) 评论(0) 编辑收藏举报

刷新页面返回顶部

huansky

javascript实例——时间日期篇(包含5个实例)

1、指定位置的时钟显示

2、表针式时钟

3、带按钮开关的form时钟

4、年龄提示器

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

公告