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

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

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

7372306570f5c8f9ba54786ce8435141.png

html代码如下:

复制代码代码如下:

css 代码如下:

复制代码代码如下:

* {

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;

}

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

91d903c026257cbe17f7c436d4049b05.png

更改后的css代码:

复制代码代码如下:

* {

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;

}

初始化 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();

}

最终页面代码:

复制代码代码如下:

http://www.w3.org/1999/xhtml">

* {

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;

}

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();

}

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我来为你介绍一下如何使用 HTML5、CSS 和 JavaScript 实现横向时间轴特效。 首先,我们需要使用 HTML5 创建一个基本的网页结构,然后使用 CSS 样式来布局和设计时间轴。最后,我们使用 JavaScript 来动态地处理时间轴的交互效果。 以下是一个简单HTML 结构,用于创建横向时间轴: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Horizontal Timeline</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="timeline"> <div class="container"> <div class="timeline-item"> <div class="timeline-icon"></div> <div class="timeline-content"> <h2>Event Title</h2> <p>Event Description</p> <span class="date">Event Date</span> </div> </div> <!-- more timeline items --> </div> </div> <script src="script.js"></script> </body> </html> ``` 然后,我们需要使用 CSS 来布局和设计时间轴。在这个例子,我们使用 Flexbox 布局来实现时间轴条和时间轴项的排列。以下是基本的 CSS 样式: ```css .timeline { position: relative; margin: 0 auto; width: 80%; height: 100px; background-color: #f5f5f5; border-radius: 5px; } .container { display: flex; flex-direction: row; justify-content: space-between; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 100%; overflow: hidden; } .timeline-item { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 25%; height: 100%; transition: all 0.3s ease; } .timeline-item:hover { transform: scale(1.1); } .timeline-icon { width: 50px; height: 50px; background-color: #007bff; border-radius: 50%; } .timeline-content { text-align: center; padding: 20px; } .timeline-content h2 { margin-top: 0; } .date { display: block; font-size: 12px; font-style: italic; margin-top: 10px; } ``` 最后,我们需要使用 JavaScript 来动态地处理时间轴的交互效果。在这个例子,我们使用了 jQuery 库来处理鼠标悬停和点击事件。以下是基本的 JavaScript 代码: ```javascript $(document).ready(function() { $(".timeline-item").hover(function() { $(this).toggleClass("active"); }); $(".timeline-item").click(function() { $(".timeline-item").removeClass("selected"); $(this).addClass("selected"); }); }); ``` 以上就是使用 HTML5、CSS 和 JavaScript 实现横向时间轴特效的基本步骤和代码示例。希望可以帮到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值