网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 CSS3+js实现简单的时钟特效
范文
    学习css3ing，正在学习transfomr，突发奇想用此做个小时钟，开始吧：
    准备前期工作，把时钟的表盘，时分秒针，实时时间标签 的大概样子做好，效果如图：
    
    html代码如下：
    代码如下:
    <div>
    <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. 初始化默认时间，和表盘刻度 ，效果如下：
    
    更改后的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/xhtmlhttp://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 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有所帮助。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/23 4:30:37