首页 > 试题广场 >

网页时钟，第一问：使用HTML，CSS绘制一个时钟，效果图和

[问答题]
网页时钟 第一问：使用HTML，CSS绘制一个时钟，效果图和素材如下图（注意指针可以旋转到任意位置） 第二问：用Javascript编写一个Clock类，实现如下接口：
1.构造函数Clock(HTMLDomElement dom) ：在参数dom中生成上述时钟
2. setTime(hour,minute,second) ：设置时钟时间，指针指定到正确位置
3. run()时钟开始工作 可以使用jQuery等任何前端框架
添加回答
Azz头像 Azz
第一问:
html:
<div class="clock">
    <div class="clock-panel"></div>
    <div class="clock-hour"></div>
    <div class="clock-mini"></div>
    <div class="clock-second"></div>
</div>

css:
.clock {
   position: relative;
   margin: 50px auto;
   width: 800px;
}

.clock .clock-panel {
  position: absolute;
  left:0;
  right:0;
  background: url("clock.png");
  background-size: 1024px;
  background-position: -188px -50px;
  background-repeat: no-repeat;
  z-index: 1;
  height: 800px;
  width: 800px;
}

.clock .clock-hour {
  /* display:none; */
  background: url("clock.png");
  background-size: 1024px;
  position: absolute;
  transform-origin: 15px 145px;
  z-index: 2;
  height: 161px;
  width: 31px;
  left: 375px;
  top: 250px;
  background-position: -120px -558px;
}

.clock .clock-mini {
  /* display:none; */
  background: url("clock.png");
  background-size: 1024px;
  position: absolute;
  z-index: 3;
  height: 220px;
  width: 28px;
  background-position: -73px -498px;
  transform-origin: 14px 205px;
  left: 376px;
  top: 185px;
}

.clock .clock-second {
  /* display:none; */
  background: url("clock.png");
  background-size: 1024px;
  position: absolute;
  z-index: 4;
  height: 321px;
  width: 31px;
  background-position: -26px -466px;
  transform-origin: 15px 240px;
  left: 375px;
  top: 153px;
}

第二问:

    function Clock(dom){
      this.domClock = document.createElement('div');
      this.domPanl = document.createElement('div');
      this.domHour = document.createElement('div');
      this.domMini = document.createElement('div');
      this.domSecond = document.createElement('div');
      this.domClock.className = "clock";
      this.domPanl.className = "clock-panel";
      this.domHour.className = "clock-hour";
      this.domMini.className = "clock-mini";
      this.domSecond.className = "clock-second";
      this.domClock.appendChild(this.domPanl);
      this.domClock.appendChild(this.domHour);
      this.domClock.appendChild(this.domMini);
      this.domClock.appendChild(this.domSecond);
      dom.appendChild(this.domClock);
      return this;
    }

    Clock.prototype.setTime = function(hour, minute, second){
      this.hour = hour;
      this.minute = minute;
      this.second = second;
      this.domHour.style.transform = "rotate(" + (hour * 30 + 0.5 * minute) + "deg)";
      this.domMini.style.transform = "rotate(" + minute * 6 + "deg)";
      this.domSecond.style.transform = "rotate(" + second * 6 + "deg)";
    }

    Clock.prototype.run = function(){
      var self = this;
      var clockId = setInterval(function(){
        var now = new Date(0, 0, 0, self.hour, self.minute, self.second + 1);
        self.second  = self.second + 1;
        self.domHour.style.transform = "rotate(" + (now.getHours() * 30 + 0.5 * now.getMinutes()) + "deg)";
        self.domMini.style.transform = "rotate(" + now.getMinutes() * 6 + "deg)";
        self.domSecond.style.transform = "rotate(" + now.getSeconds() * 6 + "deg)";
      }, 1000);
      this.domHour.style.display = "block";
      this.domMini.style.display = "block";
      this.domSecond.style.display = "block";
    }



发表于 2015-03-11 22:28:58 回复(0)
牛客344435号头像 牛客344435号 
<div id="clock"></div>
<style>
*{ padding:0; margin:0}
.clock{ background-image:url('clock.png'); width:750px;height:728px; background-position:-202px -68px;background-repeat:no-repeat; position:relative }
.clock p{ position:absolute; top:50%;left:50%;background-image:url('clock.png'); background-repeat:no-repeat}
.clock p:first-child{background-position:-25px -465px; width:31px; height:480px; margin-top:-240px; margin-left:-15px;}
.clock p:nth-child(2){background-position:-74px -499px; width:27px; height:412px; margin-top:-206px; margin-left:-12px;}
.clock p:last-child{background-position:-120px -558px; width:31px; height:294px; margin-top:-147px; margin-left:-15px;}
</style>

<script>
function Clock(dom){
 this.dom=dom;
 this.hour=0;
 this.minute=0;
 this.second=0;
 }
 Clock.prototype.render=function(){
 var elem = this.dom;
 elem.setAttribute('class','clock');
 elem.setAttribute('className','clock');
 elem.innerHTML='<p></p><p></p><p></p>'; 
 }
 Clock.prototype.setCurrentTime=function(hour,minute,second){
 this.hour=hour>12?hour-12:hour;
 this.minute=minute;
 this.second=second;
 }
 Clock.prototype.run=function(){
 var ps = this.dom.getElementsByTagName('p');
 that=this;
 var timer = setInterval(function(){
 var s1=that.second*6,
 s2=(that.minute*60+that.second)*6/60,
 s3=(that.hour*3600+that.minute*60+that.second)*30/3600;
 ps[0].style.transform='rotate('+(s1+6)+'deg)';
 ps[1].style.transform='rotate('+(s2+1/60)+'deg)';
 ps[2].style.transform='rotate('+(s3+1/3600)+'deg)';
 if(that.second<60){
 that.second++;
 }else{
 that.second=0;
 if(that.minute<60){
 that.minute++;
 }else{
 that.minute=0;
 if(that.second<12){
 that.hour++;
 }else{
 that.hour=0;
 }
 }
 }
 },1000);
 }
 var dom = document.getElementById('clock');
 var thisClock = new Clock(dom); 
 thisClock.render();
 thisClock.run();
 thisClock.setCurrentTime(16,58,58); 
</script>

写了半天，效果出来了，不知道有没有简便方法，火狐下看效果
编辑于 2015-03-11 17:37:10 回复(0)
熊熊109头像 熊熊109 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css">
        html,body,div{
            margin: 0;
            padding: 0;
        }
        .clock-wrap{
            width: 300px;
            height: 300px;
            margin:20px auto;
            background: url("clock1.png") -75px -20px no-repeat;
            position: relative;
        }
        .clock-wrap>div{
            position: absolute;
            width: 12px;
            height: 100px;
            background-color: #ccc;
            top:80px;
            left: 50%;
            margin-left: -1px;
/*            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;*/
        }
        #sec{
            top:60px;
            height: 128px;
            background: url('clock1.png') -10px -182px no-repeat;
            -webkit-tran敏感词orm-origin: center 94px;
            -moz-tran敏感词orm-origin: center 94px;
            -ms-tran敏感词orm-origin: center 94px;
            -o-tran敏感词orm-origin: center 94px;
            tran敏感词orm-origin: center 94px;
            -webkit-tran敏感词orm: rotateZ(30deg);
            -moz-tran敏感词orm: rotateZ(30deg);
            -ms-tran敏感词orm: rotateZ(30deg);
            -o-tran敏感词orm: rotateZ(30deg);
            tran敏感词orm: rotateZ(30deg);
        }
        #min{
            height: 88px;
            background: url('clock1.png') -28px -202px no-repeat;
            -webkit-tran敏感词orm-origin: center 75px;
            -moz-tran敏感词orm-origin: center 75px;
            -ms-tran敏感词orm-origin: center 75px;
            -o-tran敏感词orm-origin: center 75px;
            tran敏感词orm-origin: center 75px;
            -webkit-tran敏感词orm: rotateZ(145deg);
            -moz-tran敏感词orm: rotateZ(145deg);
            -ms-tran敏感词orm: rotateZ(145deg);
            -o-tran敏感词orm: rotateZ(145deg);
            tran敏感词orm: rotateZ(145deg);
        }
        #hour{
            height: 84px;
            background: url('clock1.png') -47px -202px no-repeat;
            -webkit-tran敏感词orm-origin: center 75px;
            -moz-tran敏感词orm-origin: center 75px;
            -ms-tran敏感词orm-origin: center 75px;
            -o-tran敏感词orm-origin: center 75px;
            tran敏感词orm-origin: center 75px;
            -webkit-tran敏感词orm: rotateZ(60deg);
            -moz-tran敏感词orm: rotateZ(60deg);
            -ms-tran敏感词orm: rotateZ(60deg);
            -o-tran敏感词orm: rotateZ(60deg);
            tran敏感词orm: rotateZ(60deg);
        }
    </style>
</head>
<script type="text/javascript">
    var Clock=function(json){

        this.hour=json.hour;
        this.min=json.min;
        this.sec=json.sec;

    }
    Clock.prototype.run=function(){
        var clock=this;
        var date=new Date();
        var hh=date.getHours();
        var mm=date.getMinutes();
        var ss=date.getSeconds();
        clock.setTime(hh,mm,ss);
        setInterval(function(){
            date=new Date();
            hh=date.getHours();
            mm=date.getMinutes();
            ss=date.getSeconds();
            clock.setTime(hh,mm,ss);
        },1e3);

    }
    Clock.prototype.setTime=function(h,m,s){

        var trans=['webkitTran敏感词orm','msTran敏感词orm','mozTran敏感词orm','oTran敏感词orm','tran敏感词orm'];

        for(var i=0;i<trans.length;i++){
            this.hour.style[trans[i]]='rotateZ('+((h/12)*360)+'deg)';
            this.min.style[trans[i]]='rotateZ('+((m/60)*360)+'deg)';
            this.sec.style[trans[i]]='rotateZ('+((s/60)*360)+'deg)';
        }

    }
    window.onload=function(){

        var oH=document.getElementById('hour');
        var oM=document.getElementById('min');
        var oS=document.getElementById('sec');
        var c1=new Clock({

            hour:oH,
            min:oM,
            sec:oS

        });
        c1.run();
    }
</script>
<body>
    <div class="clock-wrap">
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
    </div>
</body>
</html>

发表于 2015-04-23 11:06:23 回复(2)
欣欣头像 欣欣 
//css
div.clock,div.pointor-h,div.pointor-m,div.pointor-s{
            background:url(clock.png) no-repeat scroll;
        }
        div.clock{
            width:770px;
            height:750px;
            background-position:-190px -67px;
        }
        div.pointor-h,div.pointor-m,div.pointor-s{
            width:33px;
        }
        div.pointor-h{
            background-position:-119px -557px;
            height:300px;
            position:relative;
            left:370px;
            top:220px;
        }
        div.pointor-m{
            background-position:-70px -500px;
            height:410px;
            position:relative;
            left:370px;
            top:-138px;
        }
        div.pointor-s{
            background-position:-24px -460px;
            height:490px;
            position:relative;
            left:371px;
            top:-590px;
            
        }
//



function Clock(DOM){
            this._clock = document.createElement("div"),
            this._pointor_h = document.createElement("div"),
            this._pointor_m = document.createElement("div"),
            this._pointor_s = document.createElement("div");
            this._clock.className = "clock";
            this._pointor_h.className = "pointor-h";
            this._pointor_m.className = "pointor-m";
            this._pointor_s.className = "pointor-s";
            this._clock.appendChild(this._pointor_h);
            this._clock.appendChild(this._pointor_m);
            this._clock.appendChild(this._pointor_s);
            if(DOM){
                DOM.appendChild(this._clock)
            }    
        }    
        Clock.prototype.getHourse = function(){return this.hour}
        Clock.prototype.getMinute = function(){return this.minute}
        Clock.prototype.getSecond = function(){return this.second}
        Clock.prototype.getTime = function(){return this.hour+":"+this.minute+":"+this.second}
        Clock.prototype.refresh=function (){
                 this._pointor_h.style.transform = "rotate("+(((this.hour%12)*30)+(this.minute*30/60)+(this.second*30/3600)).toFixed(2)+"deg";    
                 this._pointor_m.style.transform = "rotate("+((this.minute*6)+(this.second*6/60)).toFixed(2)+"deg)";
                 this._pointor_s.style.transform = "rotate("+(this.second*6).toFixed(2)+"deg)";                     
        }
            
        Clock.prototype.setTime    = function(h,m,s){
            this.hour =h;
            this.minute=m;
            this.second=s;
            this.refresh();
        }
    
        Clock.prototype.run = function(){
                var self=this;
                setInterval(function(){
                 if(++self.second==60){
                    self.second=0;
                    if(++self.minute==60){
                        self.minute=0;
                        if(++self.hour==24){
                            self.hour=0;
                        }
                    }
                 } 
                 self.refresh();
                },1000)
        }

编辑于 2015-04-30 15:27:30 回复(0)
提交观点

问题信息

美团 Javascript HTML
上传者：稻叶三千
难度：
4条回答 36204浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号