Clock

最新推荐文章于 2024-06-30 15:45:36 发布

iteye_18181

最新推荐文章于 2024-06-30 15:45:36 发布

阅读量138

点赞数

分类专栏：蓝文章标签： 360 XHTML HTML

本文链接：https://blog.csdn.net/iteye_18181/article/details/81825051

版权

蓝专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script type="text/javascript" language="javascript">
var ClockClass = {
//初始化表盘
ClockInit: function() {
var numberArray = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
//存取时刻表的暂存的容器，便于一次性加入
var numberTemp = document.createDocumentFragment();
//将length读取出来，这样避免每次去计算长度
var numberLength = numberArray.length
for (var i = 0; i < numberLength; i++) {
//求每个时刻div的X
var x = 100 + 100 * Math.sin(i * 30 * (2 * Math.PI / 360));
//求每个时刻div的Y
var y = 100 - 100 * Math.cos(i * 30 * (2 * Math.PI / 360));
//创建DIV
var divPoint = document.createElement("div");
divPoint.style.left = x;
divPoint.style.width = "20px";
divPoint.style.height = "20px";
divPoint.style.top = y;
divPoint.style.color = "#00A8EC";
divPoint.style.textAlign = "center";
divPoint.style.position = "absolute";
divPoint.innerHTML = numberArray[i];
numberTemp.appendChild(divPoint);
}
document.getElementById("divClock").appendChild(numberTemp);
},
//初始化指针
PInit: function(angle, distance, color, divPoint) {
//求每个时刻div的X
var x = 100 + distance * Math.sin(angle * (2 * Math.PI / 360));
//求每个时刻div的Y
var y = 100 - distance * Math.cos(angle * (2 * Math.PI / 360));
var s = -1;
if (divPoint == null) {
var divPoint = document.createElement("div");
s = 1;
}
divPoint.style.left = x;
divPoint.style.top = y;
divPoint.style.width = "5px";
divPoint.style.height = "5px";

divPoint.style.textAlign = "center";
divPoint.style.position = "absolute";
divPoint.style.backgroundColor = color;
if (s == 1) {
return divPoint;
}

},

iteye_18181

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Clock

var ClockClass = { //初始化表盘 ClockInit: function() { var numberArray = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; //...
复制链接

扫一扫

专栏目录