zoukankan      html  css  js  c++  java
  • 一个基于WEB的js时间控件的实现

    主要使用了VML标记,支持IE5.5以上版本

    具体实现代码:

    <html xmlns:v="urn:schemas-microsoft-com:vml"
    xmlns:o="urn:schemas-microsoft-com:office:office"
    xmlns="http://www.w3.org/TR/REC-html40">
    <head>
    <META http-equiv="Content-Type" content="text/html; Charset=UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <title>vml_clock</title>
    <STYLE>
    v/:*{behavior:url(#default#VML);}
    o/:* { behavior: url(#default#VML) }
    </STYLE>
    <script>
    var hh=0,mm=0,tt="";//Added
    var cx=100, cy=115, banj=90, dkd=16, xkd=4;hkd=10//dkd时刻度长度、xkd分刻度长度
    var seclen=0.8, minlen=0.6, hourlen=0.5;
    j=0;
    a=0;
    var sh;
    function init()
    {
       div1.appendChild(document.createElement("<v:oval style='position:absolute;left:"+(cx-banj)+";top:"+(cy-banj)+";"+(2.0*banj)+";height:"+(2.0*banj)+";' strokecolor='green' strokeweight='2' fillcolor='white'/>"));
        //a++;
        var dt=new Date();
        var h0=dt.getHours() ;
        var mark=1;
      
       if(h0<12)
       {
       document.getElementById('noonselect').value = 'AM';
       mark=1;
      
       }
       else
       {
       document.getElementById('noonselect').value = 'PM';
       mark=2;
       
       }
     
     
     
     
      for(var i=0;i<24;i++)
      {
       if(i%2==0)
       {
        var ang=Math.PI/6.0;var px=banj*Math.cos(i/2*ang);var py=banj*Math.sin(i/2*ang);var sca=1.0-dkd/banj;
        div1.appendChild(document.createElement("<v:line style='position:absolute;left:0;top:0;' from='"+(cx+px*sca)+","+(cy+py*sca)+"' to='"+(cx+px)+","+(cy+py)+"' strokecolor='black' strokeweight='2' onclick='javascript:hh="+(i/2+3)%12+";mm=0;if(document.getElementById(/"noonselect/").value == /"PM/"){hh+=12;}'/>")); // onclick method is Added
     
       
       
         var t=document.createElement("div");
      var p={//根据你的时钟大小调整坐标数值
      x:Array(93,158,98,33),
      y:Array(40,105,173,105)
      }
      if(i%6==0)
      {
      // alert("left="+p.x[j]+":top="+p.y[j]); //j在最前面初始化为0
       t.style.cssText="position:absolute;left:"+p.x[j]+"px;top:"+p.y[j]+"px; font-size:10pt;color:#F00;line-height:18px;z-index:"+(j+1)*10;
         
      
       if(h0<12)
       {
       
       t.innerText=(i%24==0)?"12":(i/2)%12;
       
       }
       else
       {
       
       t.innerText=(i%24==0)?"24":(i/2)%12+12;
       
       }
       div1.appendChild(t);

       j++;
        }
       
         }
       else
       {
         var ang=Math.PI/12.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-hkd/banj;
        div1.appendChild(document.createElement("<v:line style='position:absolute;left:0;top:0;' from='"+(cx+px*sca)+","+(cy+py*sca)+"' to='"+(cx+px)+","+(cy+py)+"' strokecolor='blue' strokeweight='1.5' onclick='javascript:hh="+((i-1)/2+3)%12+";mm=30;if(document.getElementById(/"noonselect/").value == /"PM/"){hh+=12;}'/>")); // onclick method is Added
       } 
       
       
      }
        for(var i=0;i<60;i++)
      {
        var ang=Math.PI/30.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-xkd/banj; 
      
       
       
        var sh = parseInt((i+15)/5);
      
        if(mark==1  &&(sh==12))
       
           sh -=12;
       

       
        div1.appendChild(document.createElement("<v:line style='position:absolute;left:0;top:0;' from='"+(cx+px*sca)+","+(cy+py*sca)+"' to='"+(cx+px)+","+(cy+py)+"' strokecolor='black' strokeweight='1' onclick='javascript:hh="+sh+";mm="+(i+15)%5*12+"'/>")); // onclick method is Added
      }
     

     

      div1.appendChild(document.createElement("<v:line id='hpoint' style='position:absolute;left:0;top:0;' from='"+cx+","+cy+"' to='"+cx+","+(cy-banj*hourlen)+"' strokecolor='blue' strokeweight='3'/>"));
      div1.all.hpoint.innerHTML="<v:stroke EndArrow='Classic' />";
      div1.appendChild(document.createElement("<v:line id='mpoint' style='position:absolute;left:0;top:0;' from='"+cx+","+cy+"' to='"+cx+","+(cy-banj*minlen)+"' strokecolor='blue' strokeweight='2'/>"));
      div1.all.mpoint.innerHTML="<v:stroke EndArrow='Classic' />";
      div1.appendChild(document.createElement("<v:line id='spoint' style='position:absolute;left:0;top:0;' from='"+cx+","+cy+"' to='"+cx+","+(cy-banj*seclen)+"' strokecolor='red' strokeweight='1'/>"));
      div1.all.spoint.innerHTML="<v:stroke EndArrow='Classic' />";
     
      var dt=new Date();
            var h=dt.getHours();
            var m=dt.getMinutes();
            hh=h;
            mm=m;
      showtime();

     
      sh =setInterval("showtime();",1000);
     
      
    }

    function init2()
    {

     
       if(document.getElementById('noonselect').value == 'AM')
      {
        
       div1.childNodes[2].innerText="12";   
          div1.childNodes[9].innerText="3";
          div1.childNodes[16].innerText="6";
          div1.childNodes[23].innerText="9";;
       }
      else
      {
       
        div1.childNodes[2].innerText="24";   
           div1.childNodes[9].innerText="15";
           div1.childNodes[16].innerText="18";
          div1.childNodes[23].innerText="21";
      }
         
         

       
            div1.all.hpoint.style.display="none"; 
            div1.all.mpoint.style.display="none"; 
            div1.all.spoint.style.display="none"; 
           
            hh=0;mm=0;

     
    }

    function init1()
    {

       if(document.getElementById('noonselect').value == 'AM')
      {
       
       div1.childNodes[2].innerText="12";   
          div1.childNodes[9].innerText="3";
          div1.childNodes[16].innerText="6";
          div1.childNodes[23].innerText="9";;
       }
      else
      {
       
        div1.childNodes[2].innerText="24";   
           div1.childNodes[9].innerText="15";
           div1.childNodes[16].innerText="18";
          div1.childNodes[23].innerText="21";
      }
        
        
           div1.all.hpoint.style.display=""; 
           div1.all.mpoint.style.display=""; 
           div1.all.spoint.style.display=""; 
            var dt=new Date();
            var h=dt.getHours();
            var m=dt.getMinutes();
            hh=h;
            mm=m;
    }

    function showtime()
    {
      var dt=new Date();
     
     
      var h=dt.getHours() % 12;
      var m=dt.getMinutes();
      var s=dt.getSeconds();
      var tot=h+m/60.0+s/3600.0;
      var ang=-Math.PI/2.0+2.0*Math.PI*tot/12.0;
      div1.all.hpoint.to=(cx+banj*hourlen*Math.cos(ang))+","+(cy+banj*hourlen*Math.sin(ang));
      tot=m+s/60.0;
      ang=-Math.PI/2.0+2.0*Math.PI*tot/60.0;
      div1.all.mpoint.to=(cx+banj*minlen*Math.cos(ang))+","+(cy+banj*minlen*Math.sin(ang));
      ang=-Math.PI/2.0+2.0*Math.PI*s/60.0;
      div1.all.spoint.to=(cx+banj*seclen*Math.cos(ang))+","+(cy+banj*seclen*Math.sin(ang));

      //Added
     
       if(document.getElementById('noonselect').value == 'AM'&&hh>=12)
      {
         hh -=12;
      }
      else if(document.getElementById('noonselect').value == 'PM'&&hh<12)
      {
        hh +=12;
      }
     
     
       tt=((hh<10)?"0":"")+hh+":"+((mm<10)?"0":"")+mm;
     
      sTime.value=tt;
    }

    function showlabel()

     var dt=new Date();
     var h=dt.getHours() ;
     
      if((h<=12&&document.getElementById('noonselect').value == 'AM')||(h>12&&document.getElementById('noonselect').value == 'PM'))
      {
       init1();
      }
      else
      {
       init2();  
     }

    function add()
    {
      mm++;
    }

    function low()
    {
      mm--;
    }
       
    </script>
    </head>
       
    <body style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onload="init();">

    <br>
    <span style='250;height:250;background-color:white;border:1 solid gray;color:black;overflow:hidden'>
    <p ><input type="text" id="sTime"  style="width=40"  readonly /><!--Added -->
    <input type="button" value="+" onclick="add();">
    <input type="button" value="-" onclick="low();">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <select id="noonselect" onchange="showlabel();"><option value="AM">A.M.</option><option value="PM">P.M.</option></select></p>
    <div style='250;height:250;background-color:white;border:0 solid gray;color:black;overflow:hidden' id="div1">
    </div>
    </span>
    </body>
    </html>
       
       
       
       
       
       
         

  • 相关阅读:
    环境安装和工程搭建
    计算机发展史
    计算机硬件介绍--输入设备和输出设备
    计算机硬件介绍--内存
    bit和byte
    计算机硬件介绍--中央处理器--CPU
    取投料成本
    获取BOM标准用量
    取投料数量
    怎么更改當前的USERENV('LANG')返回值 oracle
  • 原文地址:https://www.cnblogs.com/superch0054/p/4010183.html
Copyright © 2011-2022 走看看