学习css3ing,正在学习transfomr,突发奇想用此做个小时钟,开始吧:

准备前期工作,把时钟的表盘,时分秒针,实时时间标签 的大概样子做好,效果如图:

CSS3+js实现简单的时钟特效


html代码如下:


复制代码代码如下:
<div class="main">
<div id="timeLabel"></div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>

css 代码如下:


复制代码代码如下:
<style>
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 300px;
border: 1px solid #000;
box-shadow:2px 5px;
}
#timeLabel {
position: absolute;
background-color:pink;
width:100px;
height:30px;
left:100px;
top:180px;
}
#hour {
width: 100px;
height: 10px;
background-color: red;
position:absolute;
left:150px;
top:145px;
}
#minute {
width:120px;
height:8px;
background-color:blue;
position:absolute;
left:150px;
top:146px;
}
#second {
width: 140px;
height: 4px;
background-color: green;
position: absolute;
left: 150px;
top: 148px;
}
</style>

  2. 初始化默认时间,和表盘刻度 ,效果如下:

CSS3+js实现简单的时钟特效

更改后的css代码:


复制代码代码如下:
<style>
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 300px;
border: 1px solid #000;
box-shadow: 2px 5px #808080;
}
#timeLabel {
position: absolute;
background-color: pink;
width: 80px;
height: 25px;
left: 110px;
top: 180px;
color: #fff;
line-height: 25px;
text-align: center;
}
#hour {
width: 100px;
height: 10px;
background-color: red;
position: absolute;
left: 150px;
top: 145px;
transform-origin: 0 50%;
}
#minute {
width: 120px;
height: 8px;
background-color: blue;
position: absolute;
left: 150px;
top: 146px;
transform-origin: 0 50%;
}
#second {
width: 140px;
height: 4px;
background-color: green;
position: absolute;
left: 150px;
top: 148px;
transform-origin: 0 50%;
}
.hourPointer, .minuterPointer, .secondPointer {
position: absolute;
transform-origin: 0 50%;
}
.hourPointer {
height: 10px;
width: 12px;
left: 150px;
top: 145px;
background-color: #f00;
z-index:3;
}
.minuterPointer {
height: 8px;
width: 10px;
left: 150px;
top: 146px;
background-color: #b6ff00;
z-index: 2;
}
.secondPointer {
height: 6px;
width: 8px;
left: 150px;
top: 147px;
background-color: #fa8;
z-index: 1;
}
</style>

初始化 js代码:


复制代码代码如下:
window.onload = function () {
initClock();
}
var timer = null;
function $(id) {
return document.getElementById(id)
}
function CreateKeDu(pElement, className, deg, translateWidth) {
var Pointer = document.createElement("div");
Pointer.className = className
Pointer.style.transform = "rotate(" + deg + "deg) translate(" + translateWidth + "px)";
pElement.appendChild(Pointer);
}
function initClock() {
var main = $("biaopan");
var timeLabel = $("timeLabel");
var hour = $("hour");
var minute = $("minute");
var second = $("second");
var now = new Date();
var nowHour = now.getHours();
var nowMinute = now.getMinutes();
var nowSecond = now.getSeconds();
//初始化timeLabel
timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;
//初始化表盘
for (var index = 0; index < 4; index++) {
CreateKeDu(main, "hourPointer", index * 90, 138);
}
for (var index = 0; index < 12; index++) {
CreateKeDu(main, "minuterPointer",index*30, 140);
}
for (var index = 0; index < 60; index++) {
CreateKeDu(main, "secondPointer", index * 6, 142);
}
//初始化时分秒针
second.style.transform = "rotate(" + (nowSecond * 6 - 90) + "deg)";
minute.style.transform = "rotate(" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + "deg)";
hour.style.transform = "rotate(" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + "deg)";
}

3.添加定时器:

js代码如下:


复制代码代码如下:
//定时器
function startMove() {
clearInterval(timer);
timer = setInterval(function () {
var now = new Date();
var nowSecond = now.getSeconds();
var nowMinute = now.getMinutes();
var nowHour = now.getHours();
second.style.transform = "rotate(" + (nowSecond * 6 - 90) + "deg)";
minute.style.transform = "rotate(" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + "deg)";
hour.style.transform = "rotate(" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + "deg)";
timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;
}, 1000);
}

  4.使用OOP方式更改:

修改后的js代码如下:


复制代码代码如下:
function Clock() {
//定义属性
this.main = this.$("biaopan");
this.timeLabel = this.$("timeLabel");
this.hour = this.$("hour");
this.minute = this.$("minute");
this.second = this.$("second");
this.nowHour = null;
this.nowMinute = null;
this.nowSecond = null;
this.timer = null;
var _this = this;
//初始化函数
var init = function () {
_this.getNowTime();
_this.initClock();
_this.InterVal();
}
init();
}
Clock.prototype.$ = function (id) {
return document.getElementById(id)
}
Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
var Pointer = document.createElement("div");
Pointer.className = className
Pointer.style.transform = "rotate(" + deg + "deg) translate(" + translateWidth + "px)";
this.main.appendChild(Pointer);
}
Clock.prototype.getNowTime = function () {
var now = new Date();
this.nowHour = now.getHours();
this.nowMinute = now.getMinutes();
this.nowSecond = now.getSeconds();
}
Clock.prototype.setPosition = function () {
this.second.style.transform = "rotate(" + (this.nowSecond * 6 - 90) + "deg)";
this.minute.style.transform = "rotate(" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + "deg)";
this.hour.style.transform = "rotate(" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + "deg)";
}
Clock.prototype.initClock = function () {
//初始化timeLabel
this.timeLabel.innerHTML = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond;
//初始化表盘
for (var index = 0; index < 4; index++) {
this.CreateKeDu("hourPointer", index * 90, 138);
}
for (var index = 0; index < 12; index++) {
this.CreateKeDu("minuterPointer", index * 30, 140);
}
for (var index = 0; index < 60; index++) {
this.CreateKeDu("secondPointer", index * 6, 142);
}
this.setPosition();
}
Clock.prototype.InterVal = function () {
clearInterval(this.timer);
var _this = this;
this.timer = setInterval(function () {
_this.getNowTime();
_this.second.style.transform = "rotate(" + (_this.nowSecond * 6 - 90) + "deg)";
_this.minute.style.transform = "rotate(" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + "deg)";
_this.hour.style.transform = "rotate(" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + "deg)";
_this.timeLabel.innerHTML = _this.nowHour + ":" + _this.nowMinute + ":" + _this.nowSecond;
}, 1000);
}

最后调用如下:


复制代码代码如下:
window.onload = function () {
new Clock();
}

最终页面代码:


复制代码代码如下:
<!DOCTYPE html>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 300px;
border: 1px solid #000;
box-shadow: 2px 5px #808080;
}
#timeLabel {
position: absolute;
background-color: pink;
width: 80px;
height: 25px;
left: 110px;
top: 180px;
color: #fff;
line-height: 25px;
text-align: center;
}
#hour {
width: 100px;
height: 10px;
background-color: red;
position: absolute;
left: 150px;
top: 145px;
transform-origin: 0 50%;
}
#minute {
width: 120px;
height: 8px;
background-color: blue;
position: absolute;
left: 150px;
top: 146px;
transform-origin: 0 50%;
}
#second {
width: 140px;
height: 4px;
background-color: green;
position: absolute;
left: 150px;
top: 148px;
transform-origin: 0 50%;
}
.hourPointer, .minuterPointer, .secondPointer {
position: absolute;
transform-origin: 0 50%;
}
.hourPointer {
height: 10px;
width: 12px;
left: 150px;
top: 145px;
background-color: #f00;
z-index: 3;
}
.minuterPointer {
height: 8px;
width: 10px;
left: 150px;
top: 146px;
background-color: #b6ff00;
z-index: 2;
}
.secondPointer {
height: 6px;
width: 8px;
left: 150px;
top: 147px;
background-color: #fa8;
z-index: 1;
}
</style>
<script>
function Clock() {
//定义属性
this.main = this.$("biaopan");
this.timeLabel = this.$("timeLabel");
this.hour = this.$("hour");
this.minute = this.$("minute");
this.second = this.$("second");
this.nowHour = null;
this.nowMinute = null;
this.nowSecond = null;
this.timer = null;
var _this = this;
//初始化函数
var init = function () {
_this.getNowTime();
_this.initClock();
_this.InterVal();
}
init();
}
Clock.prototype.$ = function (id) {
return document.getElementById(id)
}
Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
var Pointer = document.createElement("div");
Pointer.className = className
Pointer.style.transform = "rotate(" + deg + "deg) translate(" + translateWidth + "px)";
this.main.appendChild(Pointer);
}
Clock.prototype.getNowTime = function () {
var now = new Date();
this.nowHour = now.getHours();
this.nowMinute = now.getMinutes();
this.nowSecond = now.getSeconds();
}
Clock.prototype.setPosition = function () {
this.second.style.transform = "rotate(" + (this.nowSecond * 6 - 90) + "deg)";
this.minute.style.transform = "rotate(" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + "deg)";
this.hour.style.transform = "rotate(" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + "deg)";
}
Clock.prototype.initClock = function () {
//初始化timeLabel
this.timeLabel.innerHTML = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond;
//初始化表盘
for (var index = 0; index < 4; index++) {
this.CreateKeDu("hourPointer", index * 90, 138);
}
for (var index = 0; index < 12; index++) {
this.CreateKeDu("minuterPointer", index * 30, 140);
}
for (var index = 0; index < 60; index++) {
this.CreateKeDu("secondPointer", index * 6, 142);
}
this.setPosition();
}
Clock.prototype.InterVal = function () {
clearInterval(this.timer);
var _this = this;
this.timer = setInterval(function () {
_this.getNowTime();
_this.second.style.transform = "rotate(" + (_this.nowSecond * 6 - 90) + "deg)";
_this.minute.style.transform = "rotate(" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + "deg)";
_this.hour.style.transform = "rotate(" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + "deg)";
_this.timeLabel.innerHTML = _this.nowHour + ":" + _this.nowMinute + ":" + _this.nowSecond;
}, 1000);
}
window.onload = function () {
new Clock();
}
</script>
</head>
<body>
<div class="main" id="biaopan">
<div id="timeLabel"></div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</body>
</html>

 总结:本例中使用了css3 的transform属性中的 rotate的旋转效果和translate的位移效果。

以上所述就是本文的全部内容了,希望本文能够对大家学习CSS3有所帮助。

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。