JavaScript如何实现钟表效果，时分秒针指向当前时间，并显示当前年月日,及2024春节倒计时，源码奉上
本篇有运用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);});
相关文章：
JavaScript如何实现钟表效果，时分秒针指向当前时间，并显示当前年月日,及2024春节倒计时，源码奉上
本篇有运用jQuery，记得引入jQuery库，否则不会执行的喔~ <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> <meta name"chenc" content"Runoob"> <met…...
重生奇迹MU套装大全中的极品属性
在重生奇迹MU之中，你不能如其他游戏一般只看攻击与防御，你更要看属性，这才是重生奇迹中的王道！属性好，才是极品，属性不佳，即便攻击、防御再出色，也只能沦落成为一件替用品࿰…...
用Python解决猴子分桃问题
1 问题 海滩上有一堆桃子，五只猴子来分。第一只猴子把这堆桃子平均分为五份，多了一个，这只猴子把多的一个扔入海中，拿走了一份。第二只猴子把剩下的桃子又平均分成五份，又多了一个，它同样把多的一个扔入海中…...
YOLOv8-Seg改进：分割注意力系列篇 | 新型的多尺度卷积注意力（MSCA）模块
🚀🚀🚀本文改进： 新型的多尺度卷积注意力（MSCA）模块，实现创新，MSCA包含三个部分：深度卷积聚合局部信息，多分支深度条卷积捕获多尺度上下文，以及11卷积建模不同通道之间的关系。 🚀🚀🚀MSCA多尺度特性在小目标分割检测领域表现优异 🚀🚀🚀YOLOv8-seg…...
基于springboot实现致远汽车租赁平台管理系统项目【项目源码+论文说明】计算机毕业设计
基于springboot实现致远汽车租赁平台管理系统演示 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统…...
真的设计师做图只需要一个炫云客户端就够了
真的设计师做图只需要一个炫云客户端就够了，为什么这么说呢？因为炫云的这个客户端功能真的太全了，设计师想要的功能在炫云客户端上都有，而且还很多功能是免费的，非常的实用，具体有哪些功能我们一起来看看吧…...
简述 HTTP 请求的过程是什么？
HTTP（Hypertext Transfer Protocol）请求的过程可以简单地描述为客户端与服务器之间的通信交互。下面是一般的 HTTP 请求过程： 解析 URL：客户端解析目标 URL，提取出服务器的主机名（域名）和端口号…...
免root修改手机imei的技术原理是什么？如何实现的？hook吗
在过去，修改手机IMEI（International Mobile Equipment Identity）通常需要Root权限，这给用户带来了一些不便，也存在一定的安全风险。然而，近年来，一些技术爱好者提出了一种免Root修改手机IMEI的方…...
【Redis】整合使用，进行注解式开发及应用场景和击穿、穿透、雪崩的讲解
目录 一、整合 1. 为什么 2. 整合应用 ( 1 ) pom配置 ( 2 ) 所需配置 3. 注解式开发及应用场景 1. Cacheable 2. CachePut 3. CacheEvict 4. 击穿、穿透、雪崩 一、整合 1. 为什么 Redis可以与SSM项目整合，主要是为了提高项目的性能和效率。以下是整合Re…...
数据分析-numpy
numpy numpy numpy简介优点下载ndarray的属性输出数据类型routines 函数ndarray对象的读写操作ndarray的级联和切分级联切分 ndarray的基本运算广播机制（Broadcast）ndarry的聚合操作数组元素的操作numpy 数学函数numpy 查找和排序 写在最后面 简介 nump…...
【Java】云HIS云端数字医院信息平台源码
一、云HIS系统特色 • 使用简易化 即开即用，快速复制，按需开通功能模块，多机构共享机房、软件、服务器、存储设备等资源，资源利用最大化。 • 连锁集团化 可支持连锁集团化管理，1N模式，支撑运营&#x…...
Jupyter Notebook 内核似乎挂掉了，它很快将自动重启
报错原因： OMP: Error #15: Initializing libiomp5md.dll, but found libiomp5md.dll already initialized. OMP: Hint This means that multiple copies of the OpenMP runtime have been linked into the program. That is dangerous, since it can degrade perfo…...
Flink -- 事件时间 Watermark
1、事件时间： 指的是数据产生的时间或是说是数据发生的时间。 在Flink中有三种时间分别是： Event Time：事件时间，数据产生的时间，可以反应数据真实发生的时间 Infestion Time：事件接收时间 Processing Tim…...
Django框架简介
文章目录 Django框架介绍MVC与MVT模型MVCMTV 版本问题运行django注意事项 Django的下载与基本命令下载Django方式一：在命令界面使用pip安装方式二：使用pycharm安装 Django的基础命令命令行操作pycharm操作 Django项目命令行操作与Pycharm操作的区别应用D…...
把wpf的窗体保存为png图片
昨晚在stack overflow刷问题时看到有这个问题，今天早上刚好来尝试学习一下 stack overflow的链接如下： c# - How to render a WPF UserControl to a bitmap without creating a window - Stack Overflow 测试步骤如下： 1 新建.net frame…...
2023NOIP A层联测28-大眼鸹猫
给你两个长度为 n n n 的序列 a , b a,b a,b，这两个序列都是单调不降的。 你可以对 a a a 进行不超过 m m m 次操作，每次操作你可以选择一个 i i i 满足 1 ≤ i ≤ n 1\le i\le n 1≤i≤n，然后选择一个整数（可以是负数&…...
电机应用-直流有刷电机
目录 直流有刷电机 工作原理 直流有刷减速电机的重要参数 电路原理与分析 驱动芯片分析 L298N驱动芯片 直流有刷减速电机控制实现 控制速度原理 硬件设计 L298N 野火直流有刷电机驱动板-MOS管搭建板 软件设计1：两个直流有刷减速电机按键控制 开发设计 …...
BIM、建筑机器人、隧道工程施工关键技术
一、BIM简介 （一）BIM概念 BIM（Building Information Modeling），建筑信息模型。该技术通过数字化手段，在计算机中建立虚拟建筑，该虚拟建筑提供从单一到完整、包含逻辑关系的建筑信息库。信息库…...
快速了解什么是跳跃表（skip list）
什么是跳跃表（skip list） 跳跃表（Skip List）是一种概率性的数据结构，它通过在多层链表的基础上添加“快速通道”来提高搜索效率。跳跃表的效率可以与平衡树相媲美，即在平均和最坏的情况下，查找…...
【Node.js入门】1.1Node.js 简介
Node.js入门之—1.1Node.js 简介 文章目录 Node.js入门之—1.1Node.js 简介什么是 Node.js错误说法 Node.js 的特点跨平台三方类库自带http服务器非阻塞I/O事件驱动单线程 Node.js 的应用场合适合用Node.js的场合不适合用Node.js的场合弥补Node.js不足的解决方案 什么是 Node.j…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是，要注意以下几点： Django的表单验证与null无关：null参数控制的是数据库层面字段是否可以为NULL，而blank参数控制的是Django表单验证时字…...
Ubuntu系统复制（U盘-电脑硬盘）
所需环境 电脑自带硬盘：1块 (1T) U盘1：Ubuntu系统引导盘（用于“U盘2”复制到“电脑自带硬盘”） U盘2：Ubuntu系统盘（1T，用于被复制） ！！！建议“电脑…...