html+css+js 動態時鐘
阿新 • • 發佈：2019-01-29
今天我在學習css3的時候，無意間在一個部落格好友的文章裡看見咯一個純程式碼寫出的動態時鐘，我覺得很有確，我就試著按照他的思路分析自己寫咯一個，
不過我寫的和他寫的還是有區別的，他的好些元素是用js建立的，而我的是直接在html程式碼裡面新增的，練習的過程中，我把以前我不懂怎樣使用原型平均分裂div學習到咯，程式碼如下：
<div class="box">
<div class="dot"></div
<div>
var radius = 180;//大圓半價
var dot_num = 360/$(".dot").length;//每個div對應的弧度數
//每一個dot對應的弧度;
var ahd = dot_num*Math.PI/180;
$(".dot").each(function(index, el) {
$(this).css({
"left":190+Math.sin((ahd*index))*radius,
"top":190+Math.cos((ahd*index))*radius
});
});
實現的效果圖如下：
看是不是均勻分配的呢？
html程式碼如下：
<div class="box" id="clock"> <!-- 原點 --> <div class="origin"></div> <!-- 時鐘數 --> <div class="dot_box"> <div class="dot">6</div> <div class="dot">5</div> <div class="dot">4</div> <div class="dot">3</div> <div class="dot">2</div> <div class="dot">1</div> <div class="dot">12</div> <div class="dot">11</div> <div class="dot">10</div> <div class="dot">9</div> <div class="dot">8</div> <div class="dot">7</div> </div> <!-- 時、分、秒針 --> <div class="clock_line hour_line" id="hour_line"></div> <div class="clock_line minute_line" id="minute_line"></div> <div class="clock_line second_line" id="second_line"></div> <!-- 日期 --> <div class="date_info" id="date_info"></div> <!-- 時間 --> <div class="time_info" > <div class="time" id="hour_time"></div> <div class="time" id="minute_time"></div> <div class="time" id="second_time"></div> </div> </div>
css程式碼：
body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;} .box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%; box-shadow: 0px 0px 20px 3px #444 inset; position: relative;} /*原點*/ .origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;} /* 指標 */ .clock_line{ position: absolute;position:absolute;z-index:20;} .hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px; transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;} .minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000; transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;} .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60; transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;} .dot_box{width: inherit; height: inherit;} /*時鐘數*/ .dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;} .clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7; position:absolute;top:199px;left:200px;} .scale-show{ width:12px;height:2px;background-color:#555;float:left;} .scale-hidden{width:183px;height:2px;float:left;} /*日期*/ .date_info{width:160px;height:28px; line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555; font-weight:bold;} .time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; } .time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;} #minute_time{border-left:1px solid #fff;border-right:1px solid #fff;}
js程式碼如下：
$(function(){
var clock = document.getElementById("clock");
function initNumXY(){
// 1、12個數字的位置設定
var radius = 160;//大圓半價
var dot_num = 360/$(".dot").length;//每個div對應的弧度數
//每一個dot對應的弧度;
var ahd = dot_num*Math.PI/180;
$(".dot").each(function(index, el) {
$(this).css({
"left":180+Math.sin((ahd*index))*radius,
"top":180+Math.cos((ahd*index))*radius
});
});
// 2、刻鐘設定
for(var i = 0; i < 60; i++) {
clock.innerHTML += "<div class='clock-scale'> " +
"<div class='scale-hidden'></div>" +
"<div class='scale-show'></div>" +
"</div>";
}
var scale = document.getElementsByClassName("clock-scale");
for(var i = 0; i < scale.length; i++) {
scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";
}
}
initNumXY();//呼叫上面的函式
//獲取時鐘id
var hour_line = document.getElementById("hour_line"),
minute_line = document.getElementById("minute_line"),
second_line = document.getElementById("second_line"),
date_info=document.getElementById("date_info"),//獲取date_info
hour_time = document.getElementById("hour_time"),// 獲去時間id
minute_time = document.getElementById("minute_time"),
second_time = document.getElementById("second_time");
//3、設定動態時間
function setTime(){
var nowdate = new Date();
//獲取年月日時分秒
var year = nowdate.getFullYear(),
month = nowdate.getMonth()+1,
day = nowdate.getDay(),
hours = nowdate.getHours(),
minutes = nowdate.getMinutes(),
seconds = nowdate.getSeconds(),
date = nowdate.getDate();
var weekday =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
// 獲取日期id
date_info.innerHTML=year+"年"+month+"月"+day+"日 "+weekday[day];
hour_time.innerHTML = hours >=10 ? hours : "0"+hours;
minute_time.innerHTML = minutes >=10 ? minutes : "0"+minutes;
second_time.innerHTML = seconds >=10 ? seconds : "0"+seconds;
console.log(year+"年"+month+"月"+day+"日 "+weekday[day]);
//時分秒針設定
var hour_rotate = (hours*30-90) + (Math.floor(minutes / 12) * 6);
hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
minute_line.style.transform = 'rotate(' + (minutes*6 - 90) + 'deg)';
second_line.style.transform = 'rotate(' + (seconds*6 - 90)+'deg)';
}
// setTime();
setInterval(setTime, 1000);
});
請大家多多指點。