day 1 HTML+JS 写钟表

最新推荐文章于 2021-07-11 20:42:03 发布

少年与梦1

最新推荐文章于 2021-07-11 20:42:03 发布

阅读量275

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/qq_35881389/article/details/52876130

版权

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var body_ = document.getElementsByTagName('body');

body_[0].style.background = 'black';

//创建大表盘

var clockDiv = document.createElement('div');

clockDiv.style.width = '300px';

clockDiv.style.height = '300px';

clockDiv.style.background = 'url(6.png)';

clockDiv.style.margin = '0 auto';

clockDiv.style.position = 'relative';

clockDiv.style.top = '150px';

clockDiv.style.borderRadius = '50%';

clockDiv.style.boxShadow = '0 0 150px #ccc';

body_[0].appendChild(clockDiv);

//指针

//时针

var h1 = document.createElement('div');

h1.style.height='80px';

h1.style.width='10px';

h1.style.background='cyan';

h1.style.position='absolute';

h1.style.top='80px';

h1.style.left='145px';

h1.style.transformOrigin='50% 70px';

clockDiv.appendChild(h1);

//分针

var m1 = document.createElement('div');

m1.style.height='100px';

m1.style.width='5px';

m1.style.background='blue';

m1.style.position='absolute';

m1.style.top='60px';

m1.style.left='147.5px';

m1.style.transformOrigin='50% 90px';

clockDiv.appendChild(m1);

//秒针

var s1 = document.createElement('div');

s1.style.height='120px';

s1.style.width='2px';

s1.style.background='pink';

s1.style.position='absolute';

s1.style.top='40px';

s1.style.left='149px';

s1.style.transformOrigin='50% 110px';

// s1.style.transform='rotate(90deg)';

clockDiv.appendChild(s1);

setInterval(function(){

var time=new Date();

var se=time.getSeconds();

var min=time.getMinutes();

var hours=time.getHours();

s1.style.transform='rotate('+se*6+'deg)';

m1.style.transform='rotate('+(min*6+se*6/60)+'deg)';

h1.style.transform='rotate('+(hours*30+min*30/60)+'deg)';

},1000)

//画刻度：

for (var i = 0; i < 30; i++) {

// function setTime(a,b,c){

// var nowtime =new Date() ;

// var hours=nowtime.getHours();

// var minutes=nowtime.getMinutes();

// var seconds=nowtime.getSeconds();

// var hoursDeg,minutesDeg;

// hoursDeg=(360/12*hours)+((360/60*5)/60*minutesDeg);

// minutesDeg=(360/60*minutes)+((360/60)/60*seconds);

// rotate(hoursDeg,h1);

// rotate(minutesDeg,m1);

// rotate(360/60*seconds,s1);

// }setTime()

// function rotate(deg,div){

// div.style.transform='rotate('+deg+'deg)';

// }setInterval('setTime()',1000);

var kdSpan = document.createElement('p');

kdSpan.style.borderTop = '5px solid #000';

kdSpan.style.borderBottom = '5px solid #000';

kdSpan.style.width = '2px';

kdSpan.style.height = '290px';

kdSpan.style.margin = '0px';

kdSpan.style.padding = '0px';

kdSpan.style.position = 'absolute';

kdSpan.style.left = '149px';

kdSpan.style.top = '0px';

// kdSpan.style.bo

switch (i) {

case 0:

ts();

numFun(12, 6);

break;

case 5:

ts1();

numFun(1, 7);

break;

case 10:

ts1();

numFun(2, 8);

break;

case 20:

ts1();

numFun(4, 10);

break;

case 25:

ts1();

numFun(5, 11);

break;

case 15:

ts();

numFun(3, 9);

break;

default:

}

//特殊刻度逢0 15

function ts() {

kdSpan.style.borderTop = '15px solid #000';

kdSpan.style.borderBottom = '15px solid #000';

kdSpan.style.height = '270px';

kdSpan.style.width = '4px';

kdSpan.style.left = '148px';

}

//特殊刻度逢 5 10 20 25

function ts1() {

kdSpan.style.borderTop = '10px solid #000';

kdSpan.style.borderBottom = '10px solid #000';

kdSpan.style.height = '280px';

kdSpan.style.width = '3px';

kdSpan.style.left = '148.5px';

}

kdSpan.style.transform = 'rotate(' + i * 6 + 'deg)';

clockDiv.appendChild(kdSpan);

function numFun(a, b) {

//创建数字

var numberDiv = document.createElement('p');

numberDiv.style.width = '20px';

numberDiv.style.textAlign = 'center';

numberDiv.style.height = '270px';

numberDiv.style.position = 'absolute';

numberDiv.style.color = "red";

numberDiv.style.left = '140px';

numberDiv.style.top = '15px';

numberDiv.style.margin = '0';

numberDiv.style.transform = 'rotate(' + i * 6 + 'deg)';

for (var m = 0; m < 2; m++) {

var numItem1 = document.createElement('i');

numItem1.style.fontStyle = 'normal';

numItem1.style.position = 'absolute';

// numItem1.style.top = '0';

numItem1.style.left = '0';

numItem1.style.transform = 'rotate(-' + i * 6 + 'deg)';

numItem1.style.width = '20px';

numItem1.style.textAlign = 'center';

numItem1.style.display = 'inline-block';

if(m==1){

numItem1.innerHTML = b;

numItem1.style.bottom = '0';

}else{

numItem1.innerHTML = a;

numItem1.style.top='0';

}

// numberDiv.appendChild(numItem1);

numberDiv.appendChild(numItem1);

clockDiv.appendChild(numberDiv);

}

</script>

</body>

</html>

少年与梦1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫