小练一下canvas版简单时钟与css3版漂亮时钟
无聊时候用canvas练了一下时钟,但感觉画面不是很舒服,可能canvas用的不是很精炼。
随后又用css3重写了下,还是蛮漂亮的,呵呵,先看效果图吧;
canvas版:
CSS3版:
在线浏览:http://runjs.cn/detail/a9lrocko
canvas版源代码:
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >canvas时钟</ title > < style > body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;} div{margin: 0; padding: 0;} .canvas_inner{ margin:0 auto; 400px; padding-top: 100px;} </ style > </ head > < body > < div class = "canvas_inner" > < canvas id = "clock" width = "400" height = "400" ></ canvas > </ div > < script > window.onload = function() { var winHeight = document.documentElement.clientHeight; document.getElementsByTagName('body')[0].style.height = winHeight+'px'; }; (function(doc){ var can = doc.getElementById('clock'); if(can.getContext){ var con=can.getContext("2d"); con.beginPath(); con.translate(200,200); //绘制外圆 con.strokeStyle="#fff"; con.fillStyle = '#fff'; con.arc(0,0,199,0,Math.PI*2,false); con.fill(); // 绘制内圆 con.beginPath(); con.fillStyle = '#ccc'; con.arc(0,0,195,0,Math.PI*2,false); con.fill(); //绘制小时12 con.beginPath(); con.font = "bold 20px Arial"; con.textAlign="center"; con.textBaseline = "middle"; con.fillStyle = '#f00'; con.fillText("12",0,-170); con.fillText("1",172,0); con.fillText("3",172,0); con.fillText("6",0,170); con.fillText("9",-170,0); // con.save(); var d=new Date(),time={}; time.H = d.getHours()%12; time.M = d.getMinutes(); time.S = d.getSeconds(); function getTimeData(){ time.S++; if(time.S>59){ time.S = 0; time.M++; if(time.M>59){ time.M = 0; time.H++; if(time.H>11){ time.H = 0; } } } canvasTimeLine(); } function transNumberToDeg(num){ return ((num*6-90)*0.017453293); } function canvasLineMintus(){ // var rec = 180 for(var i=0;i< 60 ;i++){ con.beginPath(); if(i%5 == 0){ con.lineWidth = 4 ; rec = 180 ; }else{ con.lineWidth = 1 ; rec = 184 } var beginDeg = transNumberToDeg (i), beginPot = computePositionByLenAndDeg (rec,beginDeg), endPot = computePositionByLenAndDeg (190,beginDeg); con.moveTo(beginPot.x,beginPot.y); con.lineTo(endPot.x,endPot.y); con.stroke(); } } function computePositionByLenAndDeg(len,deg){ return { x:len*Math.cos(deg), y:len*Math.sin(deg) } } function canvasTimeLine(){ var sDeg = transNumberToDeg (time.S), mDeg = transNumberToDeg (time.M), hDeg = transNumberToDeg (time.H*5+Math.floor(time.M/12)), sPot = computePositionByLenAndDeg (150,sDeg), mPot = computePositionByLenAndDeg (140,mDeg), hPot = computePositionByLenAndDeg (120,hDeg); con.beginPath(); con.arc(0,0,156,0,Math.PI*2,false); con.fillStyle = '#f4f4f4' ; con.fill(); // 绘制针心 con.beginPath(); con.fillStyle = '#ddd' ; con.arc(0,0,8,0,Math.PI*2,false); con.fill(); // 绘制时针 con.beginPath(); con.moveTo(0,0); con.lineTo(hPot.x,hPot.y); con.lineWidth = 6 ; con.strokeStyle = '#333' ; con.stroke(); // 绘制分针 con.beginPath(); con.moveTo(0,0); con.lineTo(mPot.x,mPot.y); con.lineWidth = 3 ; con.stroke(); // 绘制秒针 con.beginPath(); con.moveTo(0,0); con.lineTo(sPot.x,sPot.y); con.stroke(); // con.restore(); // con.save(); } getTimeData(); setInterval(function(){ getTimeData(); },1000); canvasLineMintus(); } })(document); </script></ body > </ html > |
CSS3版源代码:
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >css3+js打造漂亮时钟</ title > < style > body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;} div{margin: 0; padding: 0;} .box{padding-top: 100px; 410px; margin: 0 auto;} .clock{position: relative; 400px; height: 400px; border: 5px solid #fff; border-radius: 200px; background:-webkit-radial-gradient(center center,circle,#fff,#bbb); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); } .clock .clock-xin{position: absolute; top: 50%; left: 50%; 30px; height: 30px; border-radius: 15px; background: #eee;margin:-15px 0 0 -15px;} .clock .clock-xin2{position: absolute; top: 50%; left: 50%; 12px; height: 12px; border-radius: 6px; background: #f00; z-index: 100; margin:-6px 0 0 -6px;} .clock .date{position: absolute; z-index: 3; top: 245px; left: 130px; font-size: 20px; color: #000; text-shadow: 1px 1px white; } .clock .hour{position: absolute; z-index: 3; top: 50%; left: 50%; 160px; height: 6px; border-radius:5px; background: #000; -webkit-transform-origin: 10px 50%; margin:-3px 0 0 -10px;} .clock .min{position: absolute; z-index: 4;top: 50%; left: 50%; 180px; height: 4px; border-radius:5px; background: #333; -webkit-transform-origin: 10px 50%; margin:-2px 0 0 -10px;} .clock .sec{position: absolute; z-index: 5; top: 50%; left: 50%; 210px; height: 2px; background: #f00; -webkit-transform-origin: 30px 50%; margin:-1px 0 0 -30px;} .clock em{display: block; 2px; height: 5px; background: #000; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 0; margin-left: -1px;} .clock em.ishour{ 6px; height: 10px; margin-left: -3px;} .clock em.ishour i{font-size: 25px; color: #000; position: absolute; top: 12px; left: -7px;text-shadow: 1px 1px white; } </ style > </ head > < body > < div class = "box" > < div class = "clock" id = "clock" > < div class = "clock-xin" ></ div > < div class = "clock-xin2" ></ div > < div id = "date" class = "date" ></ div > < div id = "hour" class = "hour" ></ div > < div id = "min" class = "min" ></ div > < div id = "sec" class = "sec" ></ div > </ div > </ div > < script > window.onload = function() { var winHeight = document.documentElement.clientHeight; document.getElementsByTagName('body')[0].style.height = winHeight+'px'; var $clock = document.getElementById('clock'), $date = document.getElementById('date'), $hour = document.getElementById('hour'), $min = document.getElementById('min'), $sec = document.getElementById('sec'), oSecs = document.createElement('em'); for (var i = 1; i < 61 ; i++) { var tempSecs = oSecs .cloneNode(), pos = getSecPos (i); if(i%5==0){ tempSecs.className = 'ishour' ; tempSecs.innerHTML = '<i style="-webkit-transform:rotate(' +(-i*6)+'deg);">'+(i/5)+'</ i >'; } tempSecs.style.cssText='left:'+pos.x+'px; top:'+pos.y+'px; -webkit-transform:rotate('+i*6+'deg);'; $clock.appendChild(tempSecs); } // 圆弧上的坐标换算 function getSecPos(dep) { var hudu = (2*Math.PI/360)*6*dep, r = 200; //半径大小 return { x: Math.floor(r + Math.sin(hudu)*r), y: Math.floor(r - Math.cos(hudu)*r), } } ;(function() { // 当前时间 var _now = new Date(), _h = _now.getHours(), _m = _now.getMinutes(), _s = _now.getSeconds(); var _day = _now.getDay(); _day = (_day==0)?7:_day; $date.innerHTML = _now.getFullYear()+'-'+(_now.getMonth()+1)+'-'+_now.getDate()+' 星期'+_day; //绘制时钟 var gotime = function(){ var _h_dep = 0; _s++; if(_s>59){ _s=0; _m++; } if(_m>59){ _m=0; _h++; } if(_h>12){ _h = _h-12; } //时针偏移距离 _h_dep = Math.floor(_m/12)*6; $hour.style.cssText = '-webkit-transform:rotate('+(_h*30-90+_h_dep)+'deg);'; $min.style.cssText = '-webkit-transform:rotate('+(_m*6-90)+'deg);'; $sec.style.cssText = '-webkit-transform:rotate('+(_s*6-90)+'deg);'; }; gotime(); setInterval(gotime, 1000); })(); }; </ script > </ body > </ html > |
分类: html5/css3, javascript