| 【罗盘时钟（星空版） | 您所在的位置：网站首页 › index代码如何放桌面 › 【罗盘时钟（星空版） |
【罗盘时钟（星空版）
|
大家好，又见面了，我是你们的朋友全栈君。 目录效果源代码效果 在这里插入图片描述换个背景：  在这里插入图片描述 在这里插入图片描述源代码index.html 代码语言：javascript复制 CSDN---追梦者 $("#helang-clock").clock();clock.css 代码语言：javascript复制body{ font-size: 14px; color: #ffffff; font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif; background: url(../image/bg2.jpg) no-repeat; padding: 0; margin: 0; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .clock{ list-style: none; margin: auto; padding: 0; width: 700px; height: 700px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; line-height: 20px; user-select: none; } .clock .date{ position: absolute; z-index: 1; width: 100%; height: 20px; text-align: center; top: 340px; left: 0; } .clock .hour{ position: absolute; z-index: 3; width: 360px; height: 20px; top: 340px; left: 170px; transition: transform 0.3s ease-in-out 0s; transform:rotate(0deg); } .clock .hour>div{ position: absolute; width: 100%; right: 0; top: 0; transition: transform 1s ease-in-out 0s; transform:rotate(0deg); } .clock .hour>div>div{ float: right; width: 60px; text-align: right; } .clock .minute{ position: absolute; z-index: 4; width: 520px; height: 20px; top: 340px; left: 90px; } .clock .sec{ position: absolute; z-index: 5; width: 680px; height: 20px; top: 340px; left: 10px; } .clock>hr{ height: 0; width: 0%; position: absolute; z-index: 1; border: #ffffff solid 0; border-bottom-width: 1px; margin: 10px 0 0 0; left: 50%; top: 50%; transition: width 0.3s ease-in-out 0s; overflow: visible; } .clock>hr.active:before{ content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #ffffff; top: -2px; left: 0; position: absolute; }clock.js 代码语言：javascript复制$.fn.extend({ /* 时钟 */ clock:function () { var HL={ }; HL.$el=$(this); HL.ZHCNArr=['零','一','二','三','四','五','六','七','八','九','十']; /* 转为简体中文 */ HL.changeZHCN=function (value) { /* 小于 10 */ if(value |
【本文地址】
公司简介
联系我们