利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表。效果如下所示
实现该效果，分三大块：html、javascript、css
html部分
html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多，采用jvascript生成
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='外部的css文件路径' />
<title>时钟</title>
</head>
<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>
<script type='text/javascript' src='外部的javascript文件路径'></script>
</body>
</html>
css部分
开始代码之前，有一些css的属性需要了解，比如定位(position)，边框圆角(border-radius),变换(transform)等
position属性
position属性规定元素的定位类型，有五个值：absolute、fixed、relative、static、inherit,默认为static，即没有定位，元素按正常文档流显示；这里主要用到的是absolute和relative
absulte值，将元素设置成绝对定位，相对于static定位意外的第一个上级元素进行定位，位置可以通过'left'、'top'、'right'、'bottom'属性进行定位；如果上级元素都是static定位，则相对于body元素的位置进行定位
本例中，设定最外层的div clock为relative，所有下级元素均设定为absolute绝对定位，然后通过设置left、top等属性的值，确定其相对于clock的位置。
border-radius属性
border-radius属性向元素添加圆角边框，可以设置四个圆角的大小，本例中使用该属性将clock元素设置成一个圆
此处写了一个示例：4个div元素，宽高都是100px，border-radius不同时的效果：
transform属性
transform属性向元素应用2D或3D旋转，该属性允许我们对元素进行旋转、缩放、移动、或倾斜。本例中时针、分针、秒针、刻度等均用transform属性设置旋转；另外，transform-origin属性可以设置元素的基点位置
css部分的代码
/* 全局 */
*{
margin:;
padding:;
}
.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:;
background-color:#f6f6f6;
}
/* 时钟数字 */
.clock-num{
width:40px;
height:40px;
font-size:22px;
text-align:center;
line-height:40px;
position:absolute;
z-index:;
color:#555;
font-family:fantasy, 'Trebuchet MS';
}
.em_num{
font-size:28px;
}
/* 指针 */
.clock-line{
position:absolute;
z-index:;
}
.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;
}
/* 原点 */
.origin{
width:20px;
height:20px;
border-radius:10px;
background-color:#000;
position:absolute;
top:190px;
left:190px;
z-index:;
} /* 日期 时间 */
.date-info{
width:160px;
height:28px;
line-height:28px;
text-align:center;
position:absolute;
top:230px;
left:120px;
z-index:;
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:;
background-color:#555;
padding:;
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:;
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;
}
javascript部分
js部分没什么好说的，简单的dom操作，setInterval函数每隔一秒执行一次，修改指针的角度和显示的时间即可。代码如下
(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)";
}
}
})();
利用css+原生js制作简易钟表的更多相关文章
- 原生JS制作简易Tabs组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 原生Js_制作简易日历
javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能 实现步骤 a) 获取需要操作的dom对象 b) 在 ...
- html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
- 原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
- 新浪博客：html+css+原生JS+Ajax初级+mySql数据库——源码
**************************************************************************************************** ...
- 原生js制作播放器
以前 就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊) 做这个播放器 也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery 我也做不出来. 以前也用过a ...
- 京东首页原生----js制作|css动画|js动画|计时器--轮播图(好久没更新，这两天闲的蛋疼做个京东页面分辨率1366*768，919京东，适应没调！)要文件加关注找我要哦！
随机推荐
- Centos7 时区的设置
Linux 系统(我特指发行版, 没说内核) 下大部分软件的风格就是不会仔细去考虑向后 的兼容性, 比如你上个版本能用这种程序配置, 没准到了下一个版本, 该程序已经不见了. 比如 sysvinit ...
- Git忽略远程已存在的文件
git设置本地忽略时远程上不存在本地忽略的文件,git将忽略.如果远程分支上存在这个文件,本地在设置ignore将不起作用.换句话说git本地忽略文件必须保证git的远程仓库分支上没有这个要忽略的文件 ...
- python flask中的代码约定
在Python社区中有许多关于代码风格的约定.如果你写过一段时间Python了,那么也许对此已经有些了解. 我会简单介绍一下,同时给你一些URL链接,从中你可以找到关于这个话题的详细信息. 让我们提出 ...
- UE4学习心得：Scene Component蓝图的一个简单应用
Scene Component是蓝图类中一个不怎么常用的分类(特别是对于新手而言),主要是其实现的功能可以在Actor类中用相同的方法实现,使其作用显得有点多余. 笔者在使用过这个类之后发现其作用更相 ...
- Beta项目总结
Beta冲刺成员名单和工作量比例 姓名 学号 负责内容 工作量比例 张梨贤 170327109 负责企业人员的委托/收回授权.第三方机构的委托授权管理.分级统计展示.分级列表展示 26% 黄腾飞 17 ...
- 安装Redis 编译make gcc: error trying to exec 'cc1': execvp: 没有该文件或目录的错误
Linux(Redhat) make: gcc: error trying to exec 'cc1': execvp: 没有该文件或目录的错误 排查错误: 1.检查gcc.gcc-c++是否安装rp ...
- MySQL索引的使用
1.创建和查看索引 所谓普通索引,就是在创建索引时,不附加任何限制条件(唯一.非空等限制).该类型的索引可以创建在任何数据类型的字段上. (1)创建表时,创建普通索引 语法: 例子: (2)在已经存在 ...
- synchronized与Lock的区别
两者的区别分类对比: 类别 synchronized Lock 存在层次 Java的关键字,在jvm层面上 是一个类 锁的释放 1.以获取锁的线程执行完同步代码,释放锁 2.线程执行发生异常,jvm会 ...
- 使用Python分析ELF文件优化Flash和Sram空间的案例
1. 背景 Zephyr项目Flash和Ram空间比较紧张,有着非常强烈的优化需求. 优化的前提是量化标的,那么如何量化Flash和Ram的使用量呢? 在量化之后,首先要对量化结果进行分析,然后采取措 ...
- 在Python中用Request库模拟登录（四）：哔哩哔哩（有加密，有验证码）
!已失效! 抓包分析 获取验证码 获取加密公钥 其中hash是变化的,公钥key不变 登录 其中用户名没有被加密,密码被加密. 因为在获取公钥的时候同时返回了一个hash值,推测此hash值与密码加密 ...