通过原生JS和CSS制作钟表
2017-10-29 22:38
417 查看
实现思路：
通过css实现钟表样式；通过JavaScript实现时间调用以及计时器1s刷新。
具体应用到的属性介绍：
一、CSS部分：
position属性(relative/absolute)：
① relative(相对定位)：
相对定位是相对于自己原来的位置定位。
不会释放掉元素在原有文档流中的位置，不会影响其他文档流元素的位置；
② absolute(绝对定位)：
相对于第一个非static定位的父元素进行定位。
使用absolute的元素，会从文档流中删除，原有空间会被释放。
border-radius属性：
这个属性允许你为元素添加圆角边框。
每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
transform属性(-origin/-timing-function/-duration)：
① transform-origin：设置旋转元素的基点位置；
② transition-timing-function：指定切换效果的速度；
③ transition-duration：规定完成过渡效果需要花费的时间。
代码部分：
Body部分(构建整体框架)：<body> <div class="clock" id="clock"> <!-- 原点 --> <div class="origin"></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> <br> <h1 style="text-align: center">大家好，我是一个表。</h1> </body>
CSS部分(样式)：
<style>
* {
margin: 0;
padding: 0;
}
body {
margin-top: 150px;
}
.clock {
width: 400px;
height: 400px;
border: 10px solid #333;
box-shadow: 0px 0px 20px 3px #444 inset;
border-radius: 210px;
position: relative;
margin: 5px auto;
z-index: 10;
background-color: #f6f6f6;
}
/* 时钟数字 */
.clock-num {
width: 40px;
height: 40px;
font-size: 22px;
text-align: center;
line-height: 40px;
position: absolute;
z-index: 8;
color: #555;
font-family: fantasy, 'Trebuchet MS';
}
.em_num {
font-size: 28px;
}
/* 指针 */
.clock-line {
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%;
transition-timing-function: linear;
transition-duration: 10s;
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;
}
/* 原点 */
.origin {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #000;
position: absolute;
top: 190px;
left: 190px;
z-index: 14;
}
/* 日期 时间 */
.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;
font-family: '微软雅黑';
}
.time-info {
width: 92px;
height: 30px;
line-height: 30px;
text-align: center;
position: absolute;
top: 270px;
left: 154px;
z-index: 11;
background-color: #555;
padding: 0;
box-shadow: 0px 0px 9px 2px #222 inset;
}
.time {
width: 30px;
height: 30px;
text-align: center;
float: left;
color: #fff;
font-weight: bold;
}
#minute-time {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
/* 刻度 */
.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;
}
</style>JS部分(功能)：
<script>
(function () {
window.onload = initNumXY(200, 160, 40, 40);
var hour_line = document.getElementById("hour-line");
var minute_line = document.getElementById("minute-line");
var second_line = document.getElementById("second-line");
var date_info = document.getElementById("date-info");
var week_day = [
'星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
];
var hour_time = document.getElementById("hour-time");
var minute_time = document.getElementById("minute-time");
var second_time = document.getElementById("second-time");
function setTime() {
var this_day = new Date();
var hour = (this_day.getHours() >= 12) ?
(this_day.getHours() - 12) : this_day.getHours();
var minute = this_day.getMinutes();
var second = this_day.getSeconds();
var hour_rotate = (hour * 30 - 90) + (Math.floor(minute / 12) * 6);
var year = this_day.getFullYear();
var month = ((this_day.getMonth() + 1) < 10 ) ?
"0" + (this_day.getMonth() + 1) : (this_day.getMonth() + 1);
var date = (this_day.getDate() < 10 ) ?
"0" + this_day.getDate() : this_day.getDate();
var day = this_day.getDay();
hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
minute_line.style.transform = 'rotate(' + (minute * 6 - 90) + 'deg)';
second_line.style.transform = 'rotate(' + (second * 6 - 90) + 'deg)';
date_info.innerHTML =
year + "-" + month + "-" + date + " " + week_day[day];
hour_time.innerHTML = (this_day.getHours() < 10) ?
"0" + this_day.getHours() : this_day.getHours();
minute_time.innerHTML = (this_day.getMinutes() < 10) ?
"0" + this_day.getMinutes() : this_day.getMinutes();
second_time.innerHTML = (this_day.getSeconds() < 10) ?
"0" + this_day.getSeconds() : this_day.getSeconds();
}
setInterval(setTime, 1000);
function initNumXY(R, r, w, h) {
var numXY = [
{
"left": R + 0.5 * r - 0.5 * w,
"top": R - 0.5 * r * 1.73205 - 0.5 * h
},
{
"left": R + 0.5 * r * 1.73205 - 0.5 * w,
"top": R - 0.5 * r - 0.5 * h
},
{
"left": R + r - 0.5 * w,
"top": R - 0.5 * h
},
{
"left": R + 0.5 * r * 1.73205 - 0.5 * w,
"top": R + 0.5 * r - 0.5 * h
},
{
"left": R + 0.5 * r - 0.5 * w,
"top": R + 0.5 * r * 1.732 - 0.5 * h
},
{
"left": R - 0.5 * w,
"top": R + r - 0.5 * h
},
{
"left": R - 0.5 * r - 0.5 * w,
"top": R + 0.5 * r * 1.732 - 0.5 * h
},
{
"left": R - 0.5 * r * 1.73205 - 0.5 * w,
"top": R + 0.5 * r - 0.5 * h
},
{
"left": R - r - 0.5 * w,
"top": R - 0.5 * h
},
{
"left": R - 0.5 * r * 1.73205 - 0.5 * w,
"top": R - 0.5 * r - 0.5 * h
},
{
"left": R - 0.5 * r - 0.5 * w,
"top": R - 0.5 * r * 1.73205 - 0.5 * h
},
{
"left": R - 0.5 * w,
"top": R - r - 0.5 * h
}
];
var clock = document.getElementById("clock");
for (var i = 1; i <= 12; i++) {
if (i % 3 == 0) {
clock.innerHTML += "<div class='clock-num em_num'>" + i + "</div>";
} else {
clock.innerHTML += "<div class='clock-num'>" + i + "</div>";
}
}
var clock_num = document.getElementsByClassName("clock-num");
for (var i = 0; i < clock_num.length; i++) {
clock_num[i].style.left = numXY[i].left + 'px';
clock_num[i].style.top = numXY[i].top + 'px';
}
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)";
}
}
})();
</script>效果图：
Programming is an art form.
经过不单调试，后续还会有更优化的版本更新
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css+js 原生滑动条制作
- DotNetNuke(DNN)皮肤制作-通过JS文件解决不同IE版本对CSS解释不一致的问题
- 通过原生js添加div和css
- 无js5款纯div+css制作的弹出菜单标准
- 使用CSS制作简单的下拉菜单导航，用的是hover，js下次在分享
- IIS6.0中.css,.js等文件无法通过IE下载问题
- CSS:CSS+JS制作可折叠内容块
- android Js通过wepView调用原生代码
- 纯js+html和纯css+html制作手风琴效果
- 模态框，引导页制作(CSS,js)
- [CSS代码]Div+Css(+Js)菜单代码及制作工具
- css+js制作简单的轮播图效果
- unbelievable! 通过Css调用Js代码?
- 一款CSS+JS+DIV制作的蓝色风格tab滑动门
- JavaScript 通过native.js 调用Android原生API
- 原生js结合html5制作小飞龙的简易跳球
- 用原生js制作轮播图，以及关于position的简单归纳