时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background-image: url(./g1.gif);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
#div1 {
width: 800px;
height: 800px;
border: 60px solid transparent;
position: relative;
margin: 100px auto 40px;
background-image: url(./1.PNG);
background-size: 800px 800px;
background-repeat: no-repeat;
background-position: center;
/* border-image: linear-gradient(#F80, #2ED) 20 20; */
}
.common_style {
width: 94%;
height: 40px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
display: flex;
justify-content: space-between;
align-items: center;
}
.fs {
font-size: 24px;
}
.div2 {
transform: translate(-50%, -50%) rotateZ(120deg);
}
.span1 {
transform: rotateZ(240deg);
color: orange;
}
.div3 {
transform: translate(-50%, -50%) rotateZ(90deg);
}
.span2 {
transform: rotateZ(-90deg);
color: salmon;
}
.div4 {
transform: translate(-50%, -50%) rotateZ(150deg);
}
.span3 {
transform: rotateZ(210deg);
color: powderblue;
}
.div5 {
transform: translate(-50%, -50%);
}
.span4 {
color: rgb(175, 206, 64);
}
.div6 {
transform: translate(-50%, -50%) rotateZ(-150deg);
}
.span5 {
transform: rotateZ(150deg);
color: plum;
}
.div7 {
transform: translate(-50%, -50%) rotateZ(-120deg);
}
.span6 {
transform: rotateZ(120deg);
color: rgb(238, 112, 227);
}
.div8 {
width: 16px;
height: 16px;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-30%, -50%);
border-radius: 50%;
border: 2px solid #000;
z-index: 1000;
background-color: rgb(68, 120, 192);
}
.com {
width: 6px;
box-sizing: border-box;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
transform-origin: 50% 100% 0;
}
.div9 {
height: 40%;
border-bottom: 320px solid rgba(194, 195, 196, 0.5);
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%);
}
.div10 {
height: 30%;
border-bottom: 240px solid rgba(222, 223, 220, 0.5);
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%);
}
.div11 {
height: 20%;
border-bottom: 160px solid rgba(207, 214, 216, 0.5);
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%);
}
.div12 {
background-image: url(./bg1.PNG);
position: absolute;
top: 0;
left: 0;
}
.div13 {
background-image: url(./11.jpg);
position: absolute;
top: 0;
right: 0;
}
.commonB {
width: 140px;
height: 140px;
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
box-sizing: border-box;
}
#div14 {
text-align: center;
position: relative;
top: -7%;
}
#in1 {
width: 280px;
height: 50px;
outline: none;
border: 0;
font-size: 20px;
text-indent: 1em;
background-color: #F80;
}
</style>
</head>
<body>
<div id="div1" style="border-image: linear-gradient(#F80, #2ED) 20 20;">
<div class="div2 common_style">
<div class="span1 fs">1</div>
<div class="span1 fs">7</div>
</div>
<div class="div3 common_style">
<div class="span2 fs">12</div>
<div class="span2 fs">6</div>
</div>
<div class="div4 common_style">
<div class="span3 fs">2</div>
<div class="span3 fs">8</div>
</div>
<div class="div5 common_style">
<div class="span4 fs">9</div>
<div class="span4 fs">3</div>
</div>
<div class="div6 common_style">
<div class="span5 fs">4</div>
<div class="span5 fs">10</div>
</div>
<div class="div7 common_style">
<div class="span6 fs">5</div>
<div class="span6 fs">11</div>
</div>
<div class="div8"></div>
<div class="div9 com"></div>
<div class="div10 com"></div>
<div class="div11 com"></div>
<div class="div12 commonB"></div>
<div class="div13 commonB"></div>
<div id="div14"><input type="text" id="in1"></div>
</div>
<script>
var secondEle = document.getElementsByClassName("div9")[0];
var f = document.getElementsByClassName("div10")[0];
var g = document.getElementsByClassName("div11")[0];
secondEle.style.display = "none";
f.style.display = "none";
g.style.display = "none";
setInterval(function () {
secondEle.style.display = "block";
var time = new Date();
var second = time.getSeconds();
var deg = second / 60 * 360;
secondEle.style.transform = "rotate(" + deg + "deg)";
}, 1000)
setInterval(function () {
f.style.display = "block";
var time = new Date();
var first = time.getMinutes();
var second = time.getSeconds();
var deg = first / 60 * 360 + second / 60 * 6;
f.style.transform = "rotate(" + deg + "deg)";
}, 1000)
setInterval(function () {
g.style.display = "block";
var time = new Date();
var thrid = time.getHours();
var first = time.getMinutes();
var second = time.getSeconds();
var deg = thrid / 12 * 360 + first / 60 * 30 + second / 60 * 0.5;
g.style.transform = "rotate(" + deg + "deg)";
}, 1000)
setInterval(function () {
var time = new Date();
var year = time.getFullYear();
var mouth = time.getMonth() + 1;
var date = time.getDate();
var day = time.getDay();
var hour = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var str = " ";
var s = ".";
var strp = ":";
var st = year + s + mouth + s + date + str + "星期" + day + str + hour + strp + minutes + strp + seconds;
in1.value = st;
}, 1000)
function randomNum(min, max) {
return Math.round(Math.random() * (max - min)) + min;
}
