Canvas is not supported in your browser.
首页 课程 文章
无痕注入 APC注入 线程注入 读写驱动 注入技术 句柄表 进程线程 系统调用 保护模式 内存管理 远程CALL 软件调试 驱动封装 云下发 驱动开发 FPS数据 方框透视 FPS方框 FPS自瞄 CE D3DHOOK D3D绘制 Imgui绘制 DWM
内核课程 驱动出租 学习路线 聊天室 免责声明 提问技巧

java-JavaScript如何实现钟表效果，时分秒针指向当前时间，并显示当前年月日,及2024春节倒计时，源码奉上

推荐 原创

周杰伦

文章分类 其他 java 开发语言 阅读数 : 333 阅读时长 : 9分钟


【java-JavaScript如何实现钟表效果，时分秒针指向当前时间，并显示当前年月日,及2024春节倒计时，源码奉上】此文章归类为：["java","开发语言"]。

 本篇有运用jQuery，记得引入jQuery库，否则不会执行的喔~

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="chenc" content="Runoob">
<meta name="description" content="时钟 时间 & 钟表 日历">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-3.6.0.js"></script>
<script src="js/app.js"></script>

</head>
<body>
    <div class="today">
        <div class="clock">
            <div class="pos SS"></div>
            <div class="pos MM"></div>
            <div class="pos HH"></div>
            <div class="spot"></div>
        </div>
    </div>
</body>
</html>
*{margin: 0 auto;padding: 0;}
html,body{background: #eeeeed;font-size: 14px;color: white!important;}
/* html,body{
	background-color:#a018d3;
	background-repeat: repeat-y;
	background-image: -moz-linear-gradient(left,#a018d3,#fe30ae);
	background-image: -webkit-linear-gradient(left,#a018d3,#fe30ae);
	background-image: -o-linear-gradient(left,#a018d3,#fe30ae);
	background-image: linear-gradient(left,#a018d3,#fe30ae);
	position: relative;
	overflow-x: hidden;
} */
@font-face {
	font-family:impact;
	src:url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/a07974d9a45376b8441d90005764beb0.eot);
	src:url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/a07974d9a45376b8441d90005764beb0.eot#iefix) format("embedded-opentype"),
	url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/b07c9855bd807ccc9d825cb0392c6ef8.woff) format("woff"),
	url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/1a0d82dfb49fff2d2a291d3dbce6c95c.ttf) format("truetype"),
	url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/d1e37bdd079d3151cc0edcc71d2c8f0f.svg) format("svg");
	font-weight:400;
	font-style:normal
   }
@font-face {
    font-family:DINBold;
    src:url(../fonts/dinbold-webfont.bc8aa63.woff);
    font-weight:400;
    font-style:normal
}
@font-face {
    font-family:DINBold;
    src:url(../fonts/DIN-Bold_0.otf);
    font-weight:400;
    font-style:normal
}
@font-face {
	font-family:DINBold;
	src:url(https://jddx.jd.com/finance/index/3.0.0/static/fonts/dinbold-webfont.bc8aa63.woff);
	font-weight:400;
	font-style:normal
}
.today {
	width: 100%;
	height: auto;
    margin: 0 auto;
    text-align: center;
	padding: 20px;
	box-sizing: border-box;
}
.today p{
	margin: 20px auto;
}
.clock {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 20px auto 0px;
	text-align: center;
	background: white;
	border-radius: 50%;
	border: 12px solid #590d75;
	box-shadow: inset 0px 0px 20px 2px rgba(89,13,117,.6);
}
.clock ol {
	list-style-type: none;
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	transform: scale(0.96);
}
.clock ol li::before {
	font-family: Helvetica;
	content: counter(labelCounter) "";
}
.clock ol li {
	counter-increment: labelCounter;
	position: absolute;
    font-size: 1.5em;
    color: #7d13a5;
}
.clock ol li:nth-child(1){right:73px;top:21px}
.clock ol li:nth-child(2){right:29px;top:64px}
.clock ol li:nth-child(3){right:12px;top:123px}
.clock ol li:nth-child(4){right:31px;bottom:64px}
.clock ol li:nth-child(5){right:73px;bottom:21px}
.clock ol li:nth-child(6){left:132px;bottom:5px}
.clock ol li:nth-child(7){left:73px;bottom:21px}
.clock ol li:nth-child(8){left:31px;bottom:65px}
.clock ol li:nth-child(9){left:12px;top:123px;}
.clock ol li:nth-child(10){left:27px;top:64px}
.clock ol li:nth-child(11){left:69px;top:22px}
.clock ol li:nth-child(12){left:126px; top:5px;}
.spot {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 30px;
	height: 30px;
	/* background: #DD2476; */
    border-radius: 50%;
    z-index: 5;
}
.HH {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 13px;
	height: 13px;
	border-radius: 7px;
	transform: rotate(0deg);
	z-index: 97;
	background: #4e0b66;
	opacity: 0.8;
}
.HH::before {
	width: 10px;
	height: 65px;
	border-radius: 5px;
	background: #4e0b66;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translate(-50%,0);
}
.MM {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 13px;
	height: 13px;
	border-radius: 7px;
	transform: rotate(0deg);
	z-index: 98;
	background: #7d13a5;
	opacity: 0.8;
}
.MM:before {
	width: 6px;
	height: 95px;
	border-radius: 4px;
	background: #7d13a5;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translate(-50%,0);
}
.SS {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 13px;
	height: 13px;
	border-radius: 7px;
	transform: rotate(0deg);
	z-index: 99;
	background: #fe30ae;
	opacity: 0.8;
}
.SS:before {
	width: 2px;
	height: 135px;
	border-radius: 4px;
	background: #fe30ae;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translate(-50%,0);
	box-shadow: 2px 0px 5px rgba(174, 28, 92,.5);
}
.HH::after, .HH::before,
.MM::after, .MM::before,
.SS::after, .SS::before {
	content: "";
	display: block;
	position: absolute;
}
.day {
	margin: 10px auto 20px;
	text-align: left;
	font-size: 24px;
	font-family: DINBold;
	font-weight: lighter;
	width: 145px;
}
.time span,
.day span {
	/* font-weight: bold; */
    margin: 0px 2px;
	font-family: DINBold;
	font-weight: lighter;
	font-size: 24px;
	vertical-align: middle;
}
.time p{
	vertical-align: middle;
}
.time p:nth-child(1){
	font-size: 20px;
}
.time p span{
	font-family: DINBold;
	font-weight: lighter;
	font-size: 36px;
}
.sydate,
.time{
	color: yellow;
	vertical-align: middle;
}
.sydate{
	margin: 10px auto;
}
.sydate span{
	font-family: DINBold;
	font-weight: lighter;
	margin: 0px 2px;
}
.date {
	position: absolute;
	top: 65px;
	left: 0;
	right: 0;
	color: #590d75;
	text-align: center;
	font-size: 15px;
}
.times {
	position: absolute;
	bottom: 65px;
	left: 0;
	right: 0;
	color: #590d75;
	text-align: left;
	font-size: 16px;
	width: 100px;
}
.times span,
.date span{
	margin: 0px 2px;	
	color: #b21beb;
	font-family: DINBold;
	font-weight: lighter;
}
.week {
	position: absolute;
	top: 125px;
	right: 40px;
	color: #7d13a5;
	text-align: center;
	/* border: 1px solid #7d13a5; */
	width: 52px;
	height: 22px;
	line-height: 21px;
	font-size: 12px;
	z-index: 0;
	box-shadow: inset 0px 0px 10px 1px rgba(89,13,117,.3);
}
.year {
	position: absolute;
	top: 80px;
	left: 0;
	right: 0;
	color: #590d75;
	text-align: center;
	font-size: 80px;
	font-family: impact;
	opacity: 0.08;
	z-index: 1;
}

@-webkit-keyframes rotateOutDownLeft {
	0% {
		transform-origin: left bottom;
		opacity: 1
	}

	0%,to {
		-webkit-transform-origin: left bottom
	}

	to {
		transform-origin: left bottom;
		-webkit-transform: rotate(45deg) translateY(20px);
		transform: rotate(45deg) translateY(20px);
		opacity: 0
	}
}

@keyframes rotateOutDownLeft {
	0% {
		transform-origin: left bottom;
		opacity: 1
	}

	0%,to {
		-webkit-transform-origin: left bottom
	}

	to {
		transform-origin: left bottom;
		-webkit-transform: rotate(45deg) translateY(20px);
		transform: rotate(45deg) translateY(20px);
		opacity: 0
	}
}

.Lose{
	display: -webkit-inline-box;
	animation: rotateOutDownLeft 1000ms infinite;
    -webkit-animation: rotateOutDownLeft 1000ms infinite; /* Safari 与 Chrome */
}
.Barrage {
	position: absolute;
	width: 100%;
	height: 380px;
	margin: 0 auto;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}
.message {
	width: 60%;
	height: 50px;
	border-radius: 25px;
	text-align: center;
	line-height: 48px;
	font-size: 15px;
	cursor: pointer;
	background: rgba(89,13,117,.25);
	/* background-color: #a018d3;
	background-repeat: repeat-y;
	background-image: -moz-linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5));
	background-image: -webkit-linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5));
	background-image: -o-linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5));
	background-image: linear-gradient(0deg,rgba(254,48,174,.5),rgba(160,24,211,.5)); */
}

.key {
	position: fixed;
	width: 100%;
	height: 200px;
	padding: 40px 20px 20px 20px;
	box-sizing: border-box;
	background: white;
	z-index: 20;
	bottom: -400px;
	border-radius: 20px 20px 0px 0px;
	transition: all 300ms;
}
.keys{
	bottom: 0px;
	animation: keys 300ms ease;
    -webkit-animation: keys 300ms ease; /* Safari 与 Chrome */
}
@-webkit-keyframes keys {
	0% {
		transform: translateY(400px);
	}
	100% {
		transform: translateY(0px);
	}
}
@keyframes keys {
	0% {
		transform: translateY(400px);
	}
	100% {
		transform: translateY(0px);
	}
}

.van-field__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: #323233;
	text-align: left;
	background-color: transparent;
	border: 0;
	resize: none;
	min-height: 100px;
	font-size: 16px;
}
.buts {
	width: 80%;
	height: 42px;
	background-color: #a018d3;
	background-repeat: repeat-y;
	background-image: -moz-linear-gradient(left,#a018d3,#fe30ae);
	background-image: -webkit-linear-gradient(left,#a018d3,#fe30ae);
	background-image: -o-linear-gradient(left,#a018d3,#fe30ae);
	background-image: linear-gradient(left,#a018d3,#fe30ae);
	border-radius: 21px;
	line-height: 42px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
}
.iocnBox {
	position: absolute;
	width: 100%;
	height: 40px;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: #333;
	text-align: right;
	padding-right: 20px;
	line-height: 40px;
	cursor: pointer;
}
.iocnBox i {
	font-size: 18px;
	color: #909399;
}
.remove{
	animation-fill-mode: forwards;
	animation: remove 300ms ease;
    -webkit-animation: remove 300ms ease; /* Safari 与 Chrome */
}
@-webkit-keyframes remove {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(400px);
	}
}
@keyframes remove {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(400px);
	}
}

.Barrage span {
	position: absolute;
	background: rgba(89,13,117,.25);
	color: white;
	display: initial;
	padding: 0px 15px;
	box-sizing: border-box;
	border-radius: 20px;
	line-height: 35px;
	animation: Barrag 10s linear infinite;
	-webkit-animation: Barrag 10s linear infinite;
	top: 60px;
	white-space: nowrap;
	font-size: 12px;
}
@keyframes Barrag
{
    0% {right: -200px;opacity: 1;}
    80% {right: 1120px;opacity: 1;}
    100% {right: 1400px;opacity: 0;}
}
 
@-webkit-keyframes Barrag /* Safari 与 Chrome */
{
    0% {right: -200px;opacity: 1;}
    80% {right: 1120px;opacity: 1;}
    100% {right: 1400px;opacity: 0;}
}
.Barrage span:nth-child(2):before,
.Barrage span:nth-child(1):before{
	content:"";
	width: 24px;
	height: 24px;
	margin-right: 5px;
	background:url(../images/bq001.png) no-repeat;
	background-size: 24px 24px;
	background-position: center bottom;
	display: inline-block;
	vertical-align: middle;
}
.Barrage span:nth-child(2):after,
.Barrage span:nth-child(1):after{
	content:"";
	width: 26px;
	height: 26px;
	margin-left: 5px;
	background:url(../images/bq002.gif) no-repeat;
	background-size: 26px auto;
	background-position: center bottom;
	display: inline-block;
	vertical-align: middle;
}
.B-span2{
	top: 100px!important;
	color: #ff0!important;
	animation: Barrag 6s linear infinite!important;
	-webkit-animation: Barrag 6s linear infinite!important;
}
.Barrage span:nth-child(3){
	top: 140px!important;
	color: #0dd2ef!important;
	animation: Barrag 12.8s linear infinite!important;
	-webkit-animation: Barrag 12.8s linear infinite!important;
}
.Barrage span:nth-child(4){
	top: 160px!important;
	color: #ff0!important;
	animation: Barrag 10s linear infinite!important;
	-webkit-animation: Barrag 10s linear infinite!important;
}
.Barrage span:nth-child(5){
	top: 190px!important;
	color: #3fd316!important;
	animation: Barrag 17.5s linear infinite!important;
	-webkit-animation: Barrag 17.5s linear infinite!important;
}
.Barrage span:nth-child(6){
	top: 100px!important;
	color: #ff0!important;
	animation: Barrag 20s linear infinite!important;
	-webkit-animation: Barrag 20s linear infinite!important;
}
.Barrage span:nth-child(7){
	top: 120px!important;
	color: #0dd2ef!important;
	animation: Barrag 15s linear infinite!important;
	-webkit-animation: Barrag 15s linear infinite!important;
}
.Barrage span:nth-child(8){
	top: 200px!important;
	color: #ff0!important;
	animation: Barrag 16s linear infinite!important;
	-webkit-animation: Barrag 16s linear infinite!important;
}
.Barrage span:nth-child(9){
	top: 80px!important;
	color: #3fd316!important;
	animation: Barrag 8s linear infinite!important;
	-webkit-animation: Barrag 8s linear infinite!important;
}
@keyframes Barragss
{
    0% {right: 0px;opacity: 1;}
    80% {right: 1120px;opacity: 1;}
    100% {right: 1400px;opacity: 0;}
}
 
@-webkit-keyframes Barragss /* Safari 与 Chrome */
{
    0% {right: 0px;opacity: 1;}
    80% {right: 1120px;opacity: 1;}
    100% {right: 1400px;opacity: 0;}
}

.Tips {
	background: rgba(0,0,0,.6);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 120px;
	height: 45px;
	border-radius: 4px;
	line-height: 45px;
	text-align: center;
}

.empty {
	position: absolute;
	width: 40px;
	height: 30px;
	top: 38px;
	right: 15px;
	margin: auto;
	color: red;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	opacity: 0;
}
.Tipss{
	background: rgba(0,0,0,.6);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 200px;
	height: 45px;
	border-radius: 4px;
	line-height: 45px;
	text-align: center;
}
.music {
	width: 270px;
	margin: 30px auto;
	height: 45px;
}
.music audio {
	background: none;
	width: 100%;
	height: 100%;
}
.music marquee {
	font-size: 13px;
	color: yellow;
	margin-top: 5px;
}

$(document).ready(function(){   
    //加入时钟数字元素 
    var list = "<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>";
    var ool = "<ol>" + list + "</ol>";
    $(".spot").after(ool);
    //显示日期
    var date = "<div class='date'></div>";
    $(".spot").before(date);
    //显示星期
    var week = "<div class='week'></div>";
    $(".date").before(week);
    //显示年度
    var year = "<div class='year'></div>";
    $(".date").before(year);
    //显示时间
    var times = "<div class='times'></div>";
    $(".date").before(times);

    // 春节倒计时
    var starttime = new Date("2024/1/10");
    setInterval(function () {
        var nowtime = new Date();
        var time = starttime - nowtime;
        var day = parseInt(time / 1000 / 60 / 60 / 24);
        var hour = parseInt(time / 1000 / 60 / 60 % 24);
        var minute = parseInt(time / 1000 / 60 % 60);
        var seconds = parseInt(time / 1000 % 60);
        
        var syday = "<span>" + hour + "</span>" + "小时" + "<span>" + minute + "</span>" + "分钟" + "<span class='Lose'>" + seconds + "</span>" + "秒";
        $('.time').html("<p>春节倒计时</p>" + "<p><span>" + day + "</span>" + "天</p>");
        $(".sydate").html(syday);
        
    }, 1000);
    
    // 时钟走字方法
    function Todayss(){
        var day = new Date();  //日期
        var Y = day.getFullYear();  //年
        var M = day.getMonth() + 1;  //月
        var D = day.getDate();  //日
        var U = day.getUTCDay();  //周
        var H = day.getHours();  //时
        var MIN = day.getMinutes();  //分
        var S = day.getSeconds();  //秒
        var MSs = day.getMilliseconds();
        var MS = MSs.toString().substring(0,2);
        // 计算指针度数
        var sss = S * 6,
            mmm = MIN * 6 + (sss * 0.01),
            hhh = (H * 30) + (MIN * 0.5);
        var rotss = "rotate(" + sss + "deg)"; 
        var rotmm = "rotate(" + mmm + "deg)";
        var rothh = "rotate(" + hhh + "deg)";
        $(".HH").css({"transform":rothh});
        $(".MM").css({"transform":rotmm});
        $(".SS").css({"transform":rotss});            
        // 小于两位数,保持两位
        if(M < 10){M = "0" + M;};
        if(D < 10){D = "0" + D;};
        if(H < 10){H = "0" + H;};
        if(MIN < 10){MIN = "0" + MIN;};
        if(S < 10){S = "0" + S;};  

        switch (U){
            case 0:U="星期日";
          break;
            case 1:U="星期一";
          break;
            case 2:U="星期二";
          break;
            case 3:U="星期三";
          break;
            case 4:U="星期四";
          break;
            case 5:U="星期五";
          break;
            case 6:U="星期六";
          break;
       };

      //星期赋值
      var week = U;
      $(".week").html(week);

      //年份赋值
      var year = Y;
      $(".year").html(year);

      //日期赋值
      var date = "<span>" + M + "</span>" + "月" + "<span>" + D + "</span>" + "日";
      $(".date").html(date);

      //时间赋值
      var times = "<span>" + H + "</span>" + ":" + "" + "<span>" + MIN + "</span>" + ":" + "" + "<span>" + S + "</span>" + ":" + "" + "<span>" + MS + "</span>";
      $(".times").html(times);

    }
    // Todayss();
    setInterval(Todayss, 10);

});


更多【java-JavaScript如何实现钟表效果，时分秒针指向当前时间，并显示当前年月日,及2024春节倒计时，源码奉上】相关视频教程：www.yxfzedu.com




相关文章推荐

记录自己的技术轨迹
文章规则：
1)：文章标题请尽量与文章内容相符
2)：严禁色情、血腥、暴力
3)：严禁发布任何形式的广告贴
4)：严禁发表关于中国的政治类话题
5)：严格遵守中国互联网法律法规
6)：有侵权,疑问可发邮件至service@yxfzedu.com
近期原创 更多
友情链接
内核结构 FAQ
免责声明
课程目录
Windows内核
游戏逆向(FPS)
技术交流QQ群
342478842 215039827 137189196
314055665 159620936
微信公众号
www.yxfzedu.com是一个分享游戏安全,游戏外挂与反外挂,游戏驱动保护的视频网站！
接各种驱动定制如：游戏读写驱动，软件内存保护，防止调试等功能定制。
出租读写驱动，调试驱动，无痕注入支持各种游戏。
邮箱：service@yxfzedu.com
QQ：851920120
特别说明：不接游戏数据分析，外挂编写，登陆协议等类似业务。