1.指针时钟使用基本JS和JQuery插件两种方式实现
2.点击小喇叭可以开启或关闭声音
3.数码管时钟
4.可以用这些时钟来点缀你的网页
1.指针时钟使用基本JS和JQuery插件两种方式实现
2.点击小喇叭可以开启或关闭声音
3.数码管时钟
4.可以用这些时钟来点缀你的网页
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>test01</title>
<style type="text/css">
.second{
width:300px;
height:30px;
background-color:red;
position:fixed;
left:500px;
top:500px;
transform:rotate(45deg);
}
</style>
<script type="text/javascript">
var degre = 0;
function rotate(){
degre += 10;
var secDiv = document.getElementById("second");
secDiv.style.transform = "rotate(" + degre + "deg)";
}
function myload(){
setInterval("rotate()",1000);
}
</script>
</head>
<body onload="myload()">
<div class="second" id="second"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery方式实现旋转.</title>
<script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript" src="./js/JqueryRotate.js"></script>
<style type="text/css">
.second{
width:300px;
height:30px;
background-color:red;
position:fixed;
left:500px;
top:500px;
/* transform:rotate(45deg); */
/* transform-origin:0px 0px; */ /* CSS设置中心点,为左上角 */
}
</style>
<script type="text/javascript">
var degre = 0;
function rotate(){
degre += 10;
var secDiv = document.getElementById("second");
secDiv.style.transform = "rotate(" + degre + "deg)";
}
function rotate2(){
degre += 10;
$("#second").rotate({
angle:degre,
center:[0,0]
});
}
function myload(){
setInterval("rotate2()",1000);
}
</script>
</head>
<body onload="myload()">
<div class="second" id="second"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>时钟Click</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#clock{
width:800px;
height:800px;
border:1px solid red;
margin:auto;
background:url("./imgs/timg.png") 0px 0px no-repeat;
background-size:100% 100%;
}
</style>
</head>
<body>
<div id="clock">
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>时钟Click</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
border: 1px solid red;
margin: auto;
background: url("./imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
opacity:0.5;
}
</style>
</head>
<body>
<div id="clock">
<div class="second"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>时钟Click</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
border: 1px solid red;
margin: auto;
background: url("./imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
opacity:0.5;
transform:rotate(45deg);
transform-origin:11px 273px;
}
</style>
<script type="text/javascript">
var secDegree = 0;
// 每秒钟调用一次
function clockRotate(){
secDegree += 6;//360度/60秒=6度/秒
var divSecond = document.getElementsByClassName("second");
divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
}
// 启动定时器,定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body>
<div id="clock">
<div class="second"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>时钟Click</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
border: 1px solid red;
margin: auto;
background: url("./imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
opacity:0.5;
transform:rotate(45deg);
transform-origin:11px 273px;
}
.secHead{
width:40px;
height:40px;
background:url("./imgs/dog.jpg") 0px 0px no-repeat;
background-size:100% 100%;
position:absolute;
left:-10px;
top:64px;
border-radius:50%;
}
</style>
<script type="text/javascript">
var secDegree = 0;
// 文档准备好以后,咱们就进行秒针的数据初始化
function bodyload(){
var now = new Date();
var sec = now.getSeconds();
secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。
}
// 每秒钟调用一次
function clockRotate(){
secDegree += 6;//360度/60秒=6度/秒
var divSecond = document.getElementsByClassName("second");
divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
}
// 启动定时器,定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body onload="bodyload()">
<div id="clock">
<div class="second">
<div class="secHead"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>时钟Click</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
border: 1px solid red;
margin: auto;
background: url("./imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
opacity:0.5;
transform:rotate(45deg);
transform-origin:11px 273px;
}
.secHead{
width:40px;
height:40px;
background:url("./imgs/dog.jpg") 0px 0px no-repeat;
background-size:100% 100%;
position:absolute;
left:-10px;
top:64px;
border-radius:50%;
}
.minute{
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: red url(./imgs/pointer.png) -53px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
opacity:0.5;
transform:rotate(100deg);
transform-origin:11px 273px;
}
</style>
<script type="text/javascript">
var secDegree = 0;
var minuteDeg = 0;
// 文档准备好以后,咱们就进行秒针的数据初始化
function bodyload(){
var now = new Date();
var sec = now.getSeconds();
secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。
// 计算当前时间的分针旋转角度
var min = now.getMinutes();
minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
}
// 每秒钟调用一次
function clockRotate(){
// 秒针的旋转
secDegree += 6;//360度/60秒=6度/秒
var divSecond = document.getElementsByClassName("second");
divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
// 分针的旋转
minuteDeg += 0.1; //360度/3600秒=0.1度/秒
var divMinute = document.getElementsByClassName("minute");
divMinute[0].style.transform = "rotate(" + minuteDeg + "deg)";
}
// 启动定时器,定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body onload="bodyload()">
<div id="clock">
<div class="second">
<div class="secHead"></div>
</div>
<div class="minute"></div>
</div>
</body>
</html>
得到div然后利用js操作css设置旋转
transform设置变形的内容rotate(45deg)
旋转45度角
如果想要连续的旋转就要用到定时器
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>时钟Click</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
border: 1px solid red;
margin: auto;
background: url("./imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.secHead{
width:40px;
height:40px;
background:url("./imgs/dog.jpg") 0px 0px no-repeat;
background-size:100% 100%;
position:absolute;
left:-10px;
top:64px;
border-radius:50%;
}
.minute{
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -53px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.hour{
width: 31px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -101px 0px no-repeat;
background-size: 468% 100%;
position: absolute;
left: 389px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:16px 273px;
}
</style>
<script type="text/javascript">
var secDegree = 0;
var minuteDeg = 0;
var hourDeg = 0;
// 文档准备好以后,咱们就进行秒针的数据初始化
function bodyload(){
var now = new Date();
var sec = now.getSeconds();
secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。
// 计算当前时间的分针旋转角度
var min = now.getMinutes();
// minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
minuteDeg = min * 6;
// 计算当前时间的时针旋转角度
var hour = now.getHours();
// hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度,1小时等于3600秒,比如现在3点钟是90度,3*0.00833*3600=89.964度
// hourDeg = hour*(360/12);//360度,12份。
hourDeg = (hour + min/60) * 30; //加上分钟的时间,不然比如9点50,时钟依然指向9点,而不是靠近10点的位置。
}
// 每秒钟调用一次
function clockRotate(){
// 秒针的旋转
secDegree += 6;//360度/60秒=6度/秒
var divSecond = document.getElementsByClassName("second");
divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
// 分针的旋转
minuteDeg += 0.1; //360度/3600秒=0.1度/秒
var divMinute = document.getElementsByClassName("minute");
divMinute[0].style.transform = "rotate(" + minuteDeg + "deg)";
// 时针的旋转
// hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
hourDeg += 0.00833;
var divHour = document.getElementsByClassName("hour");
divHour[0].style.transform = "rotate(" + hourDeg + "deg)";
}
// 启动定时器,定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body onload="bodyload()">
<div id="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second">
<div class="secHead"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery时钟Click</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
border: 1px solid red;
margin: auto;
background: url("./imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.secHead{
width:40px;
height:40px;
background:url("./imgs/dog.jpg") 0px 0px no-repeat;
background-size:100% 100%;
position:absolute;
left:-10px;
top:64px;
border-radius:50%;
}
.minute{
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -53px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.hour{
width: 31px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -101px 0px no-repeat;
background-size: 468% 100%;
position: absolute;
left: 389px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:16px 273px;
}
</style>
<script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript" src="./js/JqueryRotate.js"></script>
<script type="text/javascript">
var secDegree = 0;
var minuteDeg = 0;
var hourDeg = 0;
// 文档准备好以后,咱们就进行秒针的数据初始化
function bodyload(){
var now = new Date();
var sec = now.getSeconds();
secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。
// 计算当前时间的分针旋转角度
var min = now.getMinutes();
// minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
minuteDeg = min * 6;
// 计算当前时间的时针旋转角度
var hour = now.getHours();
// hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度,1小时等于3600秒,比如现在3点钟是90度,3*0.00833*3600=89.964度
// hourDeg = hour*(360/12);//360度,12份。
hourDeg = (hour + min/60) * 30; //加上分钟的时间,不然比如9点50,时钟依然指向9点,而不是靠近10点的位置。
}
// 每秒钟调用一次
function clockRotate(){
// 秒针的旋转
secDegree += 6;//360度/60秒=6度/秒
$(".second").rotate(
{
angle:secDegree,
center:[11,273]
}
);
// 分针的旋转
minuteDeg += 0.1; //360度/3600秒=0.1度/秒
$(".minute").rotate({
angle:minuteDeg,
center:[11,273]
});
// 时针的旋转
// hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
hourDeg += 0.00833;
$(".hour").rotate({
angle:hourDeg,
center:[16,273]
});
}
// 启动定时器,定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body onload="bodyload()">
<div id="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second">
<div class="secHead"></div>
</div>
</div>
</body>
</html>
旋转要用到jQuery的插件,也可以设置旋转的角度,以及中间点
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery时钟Click</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
border: 1px solid red;
margin: auto;
background: url("./imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.secHead{
width:40px;
height:40px;
background:url("./imgs/dog.jpg") 0px 0px no-repeat;
background-size:100% 100%;
position:absolute;
left:-10px;
top:64px;
border-radius:50%;
}
.minute{
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -53px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.hour{
width: 31px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -101px 0px no-repeat;
background-size: 468% 100%;
position: absolute;
left: 389px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:16px 273px;
}
#btnSound{
width:80px;
height:80px;
border-radius:50%;
border:5px solid darkgray;
background:url("./imgs/mute.png") 2px 3px no-repeat;
position:absolute;
left:20px;
top:20px;
}
</style>
<script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript" src="./js/JqueryRotate.js"></script>
<script type="text/javascript">
var secDegree = 0;
var minuteDeg = 0;
var hourDeg = 0;
// 文档准备好以后,咱们就进行秒针的数据初始化
function bodyload(){
var now = new Date();
var sec = now.getSeconds();
secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。
// 计算当前时间的分针旋转角度
var min = now.getMinutes();
// minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
minuteDeg = min * 6;
// 计算当前时间的时针旋转角度
var hour = now.getHours();
// hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度,1小时等于3600秒,比如现在3点钟是90度,3*0.00833*3600=89.964度
// hourDeg = hour*(360/12);//360度,12份。
hourDeg = (hour + min/60) * 30; //加上分钟的时间,不然比如9点50,时钟依然指向9点,而不是靠近10点的位置。
}
// 每秒钟调用一次
function clockRotate(){
// 秒针的旋转
secDegree += 6;//360度/60秒=6度/秒
$(".second").rotate(
{
angle:secDegree,
center:[11,273]
}
);
// 分针的旋转
minuteDeg += 0.1; //360度/3600秒=0.1度/秒
$(".minute").rotate({
angle:minuteDeg,
center:[11,273]
});
// 时针的旋转
// hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
hourDeg += 0.00833;
$(".hour").rotate({
angle:hourDeg,
center:[16,273]
});
}
// 启动定时器,定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body onload="bodyload()">
<div id="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second">
<div class="secHead"></div>
</div>
<div id="btnSound"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery时钟Click</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
border: 1px solid red;
margin: auto;
background: url("./imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.secHead{
width:40px;
height:40px;
background:url("./imgs/dog.jpg") 0px 0px no-repeat;
background-size:100% 100%;
position:absolute;
left:-10px;
top:64px;
border-radius:50%;
}
.minute{
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -53px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.hour{
width: 31px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -101px 0px no-repeat;
background-size: 468% 100%;
position: absolute;
left: 389px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:16px 273px;
}
#btnSound{
width:80px;
height:80px;
border-radius:50%;
border:5px solid darkgray;
position:absolute;
left:20px;
top:20px;
}
.muteBack{
background:url("./imgs/mute.png") 2px 3px no-repeat;
}
.soundBack{
background:url("./imgs/sound.png") 2px 3px no-repeat;
animation:rotateBtn 5s linear infinite;
}
@keyframes rotateBtn{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg)
}
}
</style>
<script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript" src="./js/JqueryRotate.js"></script>
<script type="text/javascript">
var secDegree = 0;
var minuteDeg = 0;
var hourDeg = 0;
// 声音是否在播放
var playing = false;
// 文档准备好以后,咱们就进行秒针的数据初始化
function bodyload(){
var now = new Date();
var sec = now.getSeconds();
secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。
// 计算当前时间的分针旋转角度
var min = now.getMinutes();
// minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
minuteDeg = min * 6;
// 计算当前时间的时针旋转角度
var hour = now.getHours();
// hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度,1小时等于3600秒,比如现在3点钟是90度,3*0.00833*3600=89.964度
// hourDeg = hour*(360/12);//360度,12份。
hourDeg = (hour + min/60) * 30; //加上分钟的时间,不然比如9点50,时钟依然指向9点,而不是靠近10点的位置。
$("#btnSound").click(function(){
playing = !playing;
if(playing == true){
$(this).removeClass("muteBack");
$(this).addClass("soundBack");
}
else{
$(this).removeClass("soundBack");
$(this).addClass("muteBack");
}
});
}
// 每秒钟调用一次
function clockRotate(){
if(playing == true){
$("audio")[0].volume = 0.02;
$("audio")[0].play();
}
// 秒针的旋转
secDegree += 6;//360度/60秒=6度/秒
$(".second").rotate(
{
angle:secDegree,
center:[11,273]
}
);
// 分针的旋转
minuteDeg += 0.1; //360度/3600秒=0.1度/秒
$(".minute").rotate({
angle:minuteDeg,
center:[11,273]
});
// 时针的旋转
// hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
hourDeg += 0.00833;
$(".hour").rotate({
angle:hourDeg,
center:[16,273]
});
}
// 启动定时器,定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body onload="bodyload()">
<audio src="./audio/da.wav"></audio>
<div id="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second">
<div class="secHead"></div>
</div>
<div id="btnSound" class="muteBack"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>数码管时钟</title>
<style type="text/css">
.ledback{
background:url("./imgs/LED.png") 0px 0px no-repeat;
background-size:100% 100%;
width:740px;
height:300px;
margin:auto;
}
.top1{
width:100%;
height:15%;
background-color:red;
opacity:0.6;
}
.timediv{
width:100%;
height:38%;
background-color:green;
opacity:0.6;
}
.datediv{
width:100%;
height:34%;
background-color:blue;
opacity:0.6;
}
</style>
</head>
<body>
<div class="ledback">
<div class="top1"></div>
<div class="timediv"></div>
<div class="datediv"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>数码管时钟</title>
<style type="text/css">
.ledback{
background:url("./imgs/LED.png") 0px 0px no-repeat;
background-size:100% 100%;
width:740px;
height:300px;
margin:auto;
}
.top1{
width:100%;
height:15%;
background-color:red;
opacity:0.6;
}
/* 时间样式=========================================================== */
.timediv{
width:100%;
height:38%;
background-color:green;
opacity:0.6;
text-align:center;
}
/* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
.timediv>div{
display:inline-block;
transform:skewX(-10deg);/* 设置倾斜 */
}
/* 冒号的样式 */
.timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
width:20px;
height:100px;
background:url("./imgs/dot.png") -52px -13px no-repeat;
}
/* 时间的数字 */
.timenum{
width:50px;
height:100px;
background:url("./imgs/countdown8.png") -38px -13px no-repeat;
}
/* 日期样式=========================================================== */
.datediv{
width:100%;
height:36%;
background-color:blue;
opacity:0.6;
}
</style>
</head>
<body>
<div class="ledback">
<div class="top1"></div>
<div class="timediv">
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
</div>
<div class="datediv"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>VerticalAlign样式说明</title>
<style type="text/css">
.app>div{
display:inline-block;
vertical-align:middle;
}
.div0{
width:30px;
height:50px;
background-color:red;
}
.div1{
width:30px;
height:70px;
background-color:green;
}
.div2{
width:30px;
height:90px;
background-color:blue;
}
</style>
</head>
<body>
<div class="app">
<div class="div0"></div>
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>数码管时钟</title>
<style type="text/css">
.ledback{
background:url("./imgs/LED.png") 0px 0px no-repeat;
background-size:100% 100%;
width:740px;
height:300px;
margin:auto;
}
.top1{
width:100%;
height:15%;
/* background-color:red; */
opacity:0.6;
}
/* 时间样式=========================================================== */
.timediv{
width:100%;
height:38%;
/* background-color:green; */
/* opacity:0.6; */
text-align:center;
}
/* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
.timediv>div{
display:inline-block;
transform:skewX(-10deg);/* 设置倾斜 */
}
/* 冒号的样式 选择timediv下的div,第三个div和第六个div */
.timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
width:20px;
height:100px;
background:url("./imgs/dot.png") -52px -13px no-repeat;
}
/* 时间的数字 */
.timenum{
width:50px;
height:100px;
background:url("./imgs/countdown8.png") -38px -13px no-repeat;
}
/* 日期样式=========================================================== */
.datediv{
width:100%;
height:36%;
/* background-color:blue; */
/* opacity:0.6; */
text-align:center;
}
.datediv>div{
display:inline-block;
transform:skewX(-10deg);
font-size:50px;
vertical-align:middle;
color:white;
}
.datenum{
width:39px;
height:73px;
background:url("./imgs/countdown8.png") -27px -2px no-repeat;
background-size:241% 118%;
}
</style>
</head>
<body>
<div class="ledback">
<!-- 占位DIV -->
<div class="top1"></div>
<!-- 时分秒布局 -->
<div class="timediv">
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
</div>
<!-- XXXX年XX月XX日星期X布局 -->
<div class="datediv">
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">年</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">月</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">日</div>
<div class="">星期</div>
<div class="datenum"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>数码管时钟</title>
<style type="text/css">
.ledback{
background:url("./imgs/LED.png") 0px 0px no-repeat;
background-size:100% 100%;
width:740px;
height:300px;
margin:auto;
}
.top1{
width:100%;
height:15%;
/* background-color:red; */
opacity:0.6;
}
/* 时间样式=========================================================== */
.timediv{
width:100%;
height:38%;
/* background-color:green; */
/* opacity:0.6; */
text-align:center;
}
/* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
.timediv>div{
display:inline-block;
transform:skewX(-10deg);/* 设置倾斜 */
}
/* 冒号的样式 选择timediv下的div,第三个div和第六个div */
.timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
width:20px;
height:100px;
background:url("./imgs/dot.png") -52px -13px no-repeat;
}
/* 时间的数字 */
.timenum{
width:50px;
height:100px;
background:url("./imgs/countdown8.png") -38px -13px no-repeat;
}
/* 日期样式=========================================================== */
.datediv{
width:100%;
height:36%;
/* background-color:blue; */
/* opacity:0.6; */
text-align:center;
}
.datediv>div{
display:inline-block;
transform:skewX(-10deg);
font-size:50px;
vertical-align:middle;
color:white;
}
.datenum{
width:39px;
height:73px;
background:url("./imgs/countdown8.png") -27px -2px no-repeat;
background-size:241% 118%;
}
</style>
<script src="./js/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript">
// $(document).ready(function(){
// });
// 文档准备好以后的操作
$(function(){
});
function change(){
// 拿到当前时间
var now = new Date();
var second = now.getSeconds();
var sec0 = second % 10; // 123456 % 10 = 6
var sec1 = Math.floor(second / 10); // 45 / 10 = 4.5 Math.floor() 向下取整,取比较小的数字。
$(".timenum").eq(5).css({
"background-image":'url("./imgs/countdown'+sec0+'.png")'
});
$(".timenum").eq(4).css({
"background-image":'url("./imgs/countdown'+sec1+'.png")'
});
}
setInterval("change()",1000);
</script>
</head>
<body>
<div class="ledback">
<!-- 占位DIV -->
<div class="top1"></div>
<!-- 时分秒布局 -->
<div class="timediv">
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
</div>
<!-- XXXX年XX月XX日星期X布局 -->
<div class="datediv">
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">年</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">月</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">日</div>
<div class="">星期</div>
<div class="datenum"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>数码管时钟</title>
<style type="text/css">
.ledback{
background:url("./imgs/LED.png") 0px 0px no-repeat;
background-size:100% 100%;
width:740px;
height:300px;
margin:auto;
}
.top1{
width:100%;
height:15%;
/* background-color:red; */
opacity:0.6;
}
/* 时间样式=========================================================== */
.timediv{
width:100%;
height:38%;
/* background-color:green; */
/* opacity:0.6; */
text-align:center;
}
/* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
.timediv>div{
display:inline-block;
transform:skewX(-10deg);/* 设置倾斜 */
}
/* 冒号的样式 选择timediv下的div,第三个div和第六个div */
.timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
width:20px;
height:100px;
background:url("./imgs/dot.png") -52px -13px no-repeat;
}
/* 时间的数字 */
.timenum{
width:50px;
height:100px;
background:url("./imgs/countdown8.png") -38px -13px no-repeat;
}
/* 日期样式=========================================================== */
.datediv{
width:100%;
height:36%;
/* background-color:blue; */
/* opacity:0.6; */
text-align:center;
}
.datediv>div{
display:inline-block;
transform:skewX(-10deg);
font-size:50px;
vertical-align:middle;
color:white;
}
.datenum{
width:39px;
height:73px;
background:url("./imgs/countdown8.png") -27px -2px no-repeat;
background-size:241% 118%;
}
</style>
<script src="./js/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript">
// $(document).ready(function(){
// });
// 文档准备好以后的操作
$(function(){
});
function change(){
// 拿到当前时间
var now = new Date();
// 拿到秒
var second = now.getSeconds();
var sec0 = second % 10; // 123456 % 10 = 6
var sec1 = Math.floor(second / 10); // 45 / 10 = 4.5 Math.floor() 向下取整,取比较小的数字。
// 设置秒的图片
$(".timenum").eq(5).css({
"background-image":'url("./imgs/countdown'+sec0+'.png")'
});
$(".timenum").eq(4).css({
"background-image":'url("./imgs/countdown'+sec1+'.png")'
});
// 拿到分钟
var minute = now.getMinutes();
var min0 = minute % 10;
var min1 = Math.floor(minute / 10);
// 设置分钟的图片
$(".timenum").eq(3).css({
"background-image":'url("./imgs/countdown'+min0+'.png")'
});
$(".timenum").eq(2).css({
"background-image":'url("./imgs/countdown'+min1+'.png")'
});
// 拿到时钟
var hour = now.getHours();
var hour0 = hour % 10;
var hour1 = Math.floor(hour / 10);
// 设置时钟的图片
$(".timenum").eq(1).css({
"background-image":'url("./imgs/countdown'+hour0+'.png")'
});
$(".timenum").eq(0).css({
"background-image":'url("./imgs/countdown'+hour1+'.png")'
});
}
setInterval("change()",1000);
</script>
</head>
<body>
<div class="ledback">
<!-- 占位DIV -->
<div class="top1"></div>
<!-- 时分秒布局 -->
<div class="timediv">
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
</div>
<!-- XXXX年XX月XX日星期X布局 -->
<div class="datediv">
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">年</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">月</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">日</div>
<div class="">星期</div>
<div class="datenum"></div>
</div>
</div>
</body>
</html>