学习css3ing，正在学习transfomr，突发奇想用此做个小时钟，开始吧：
- 准备前期工作，把时钟的表盘，时分秒针，实时时间标签 的大概样子做好，效果如图：
html代码如下：
<div class="main"> <div id="timeLabel"></div> <div id="hour"></div> <div id="minute"></div> <div id="second"></div> </div>
css 代码如下：
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 .main { 7 position: relative; 8 margin: 100px auto; 9 width: 300px; 10 height: 300px; 11 border-radius: 300px; 12 border: 1px solid #000; 13 box-shadow:2px 5px; 14 } 15 #timeLabel { 16 position: absolute; 17 background-color:pink; 18 width:100px; 19 height:30px; 20 left:100px; 21 top:180px; 22 } 23 24 #hour { 25 width: 100px; 26 height: 10px; 27 background-color: red; 28 position:absolute; 29 left:150px; 30 top:145px; 31 } 32 #minute { 33 width:120px; 34 height:8px; 35 background-color:blue; 36 position:absolute; 37 left:150px; 38 top:146px; 39 } 40 #second { 41 width: 140px; 42 height: 4px; 43 background-color: green; 44 position: absolute; 45 left: 150px; 46 top: 148px; 47 } 48 </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(); } 最终页面代码：
<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>
总结：本例中使用了css3 的transform属性中的 rotate的旋转效果和translate的位移效果，关于transform的使用 请参考 http://www.w3school.com.cn/cssref/pr_transform.asp
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
＆gt; gt;的目的是什么 元素？Mar 21, 2025 pm 12:34 PM本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？Mar 21, 2025 pm 12:33 PM本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？Mar 21, 2025 pm 12:35 PM本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？Mar 20, 2025 pm 05:56 PM本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？Mar 12, 2025 pm 04:05 PM本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
如何使用HTML5表单验证属性来验证用户输入？Mar 17, 2025 pm 12:27 PM本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？Mar 20, 2025 pm 06:05 PM本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前ByDDD
热工具
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
SublimeText3 Linux新版
SublimeText3 Linux最新版
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
