javascript实例1——时间日期篇

时间：2016-04-26 00:04:37 阅读：330 评论：0 收藏：0 [点我收藏+]

标签：

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

后面又下了该书籍的源码，一看才发现这本书编的日期是2002年的，代码运行之后，也没有效果，原因是其所用的一些语言是已经淘汰的了。于是就想，要不我把他的代码整理整理，再添加一些自己的想法在里面，顺便练练手。

在此，也对该书的作者马健兵等编著表示致敬，感谢他们的辛苦编著。如本文有侵权，立删！

由于空间的限制，就不将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

javascript实例1——时间日期篇

标签：

原文地址：http://www.cnblogs.com/huansky/p/5431641.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行