制作时钟特效

最新推荐文章于 2021-11-30 16:08:46 发布
最新推荐文章于 2021-11-30 16:08:46 发布
阅读量1k 收藏 1
点赞数
文章标签： HTML 时钟
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qian_qian_123/article/details/83277271
版权

在网页上显示当前时间 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>显示动态时钟</title>
		<script type="text/javascript">
			var time;

			function clock() {
				var date = new Date();
				var s = date.getFullYear() + "年" +
					(date.getMonth() + 1) + "月" +
					date.getDate() + "日" +"星期"+date.getDay()+"<br/>"+
					date.getHours() + ":" +
					date.getMinutes() + ":" +
					date.getSeconds();
				document.getElementById("clockContent").innerHTML = s;
			}

			function clockGo() {
				time = setInterval("clock()", 1000);
			}

			function clockStop() {
				clearInterval(time);
			}
		</script>

	</head>

	<body>
		<input type="button" value="时钟开始" onclick="clockGo()" /><br />
		<input type="button" value="时钟暂停" onclick="clockStop()" /><br />
		<span id="clockContent">s时钟在此显示</span>
	</body>

</html>

 

笑笑师弟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript时钟特效
qiandaiyangzi的博客
11-11 266
用JavaScript时钟特效
实现时钟特效
酷小亚
05-13 1749
需求： 显示年、月、日、星期和二十四进制的时钟特效！ 代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>时钟特效</title> <style> body{ background: #000; } .content{ widt
JavaScript制作时钟特效
aopiao5855的博客
07-11 1407
需求说明：制作显示年、月、日、星期几并且显示上午（AM）和下午（PM）的 12进制的时钟,具体效果如下所示： 代码如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta...
js制作12进制的时钟特效
JackieDYH的博客
03-25 7354
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>制作12进制的时钟特效</title> </head> <body> <div id="myclock"></div> ...
html制作十二小时时钟特效,纯js代码制作的网页时钟特效【附实例】
weixin_33908906的博客
06-04 977
style="LEFT: 155px; WIDTH: 400px; ZOOM: 1; POSITION: absolute; TOP: 133px; HEIGHT: 300px">style="LEFT: -22px; WIDTH: 150px; ZOOM: 1.5; POSITION: absolute; TOP: -57px; HEIGHT: 150px">style="Z-IND...
JS数字时钟特效
xing942012的博客
11-30 1052
我们用HTML + CSS +JS 来写一个时钟特效，成品效果图如下： 首先我们先把HTML写出来 <div id="box"> <h2>The Time Is Now</h2> <div id="clock"> <div> <span id="hours">00</span><span>Hours</span> </div> &l.
js+画布canvas制作时钟特效
fangyuwuzhu的博客
04-03 746
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="c" width="500&
JS 实现简单时钟特效（二）动态时钟圆盘
m0_50873883的博客
07-19 1359
动态时钟圆盘 之前写了一个极简版的JS 实现简单时钟特效 现在我们给它变漂亮，加一些图片，给它美化美化 上代码 <!DOCTYPE html> <!--时钟特效case--> <html> <head> <meta charset="UTF-8"> <title>时钟特效case</title> <style> .myclock { width: 575p
web前端入门到实战：纯js时钟特效
前端工程师年薪30万，就靠这套教程！持续更新最新知识
05-04 672
电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。 先准备一个html元素，用来放置时钟。新建一个div元素，它的id命名为clock，如下所示： <div id="clock" class="clock_con"></div><...
js+css3制作时钟特效
10-21
本文给大家汇总了2个JavaScript+css3实现的时钟特效的代码，非常的漂亮，有需要的小伙伴可以来参考下
jquery制作LED 时钟特效
10-24
主要介绍了jquery制作LED 时钟特效,效果非常不错，需要的朋友可以参考下
jquery制作图片时钟特效
10-23
主要介绍了jquery制作图片时钟特效，感兴趣的小伙伴们可以参考一下
js时钟特效
01-18
JavaScript时钟特效是一种利用JavaScript编程语言创建的动态时钟展示方式，它可以为网站增添互动性和视觉吸引力。在这款"js时钟"项目中，开发者通过编写JavaScript代码模拟了传统指针式时钟的工作原理，使得网页上的...
Datacom-HCIA认证全套课件
07-30
Datacom-HCIA认证全套课件 完整的，不错 HC110110001 传输介质简介.pptx HC110110002 以太网帧结构.pptx HC110110003 IP编址.pptx HC110110004 ICMP协议.pptx HC110110005 ARP协议.pptx HC110110006 传输层协议.pptx HC110110007 数据转发过程.pptx HC110110008 VRP基础.pptx HC110110009 命令行基础.pptx HC110110010 文件系统基础.pptx HC110110011 VRP系统管理.pptx HC110110012 交换网络基础.pptx HC110110013 STP原理与配置.pptx
基于tp5的校园生活系统.zip
最新发布
07-30
基于tp5的校园生活系统.zip
C++技术资料分享17重要培训技术资料.zip
07-30
C++技术资料分享17重要培训技术资料.zip
第十三届恩智浦智能汽车竞赛---三轮电磁组.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
nurbsMATLAB中，NURBS（非均匀有理B样条）是一种强大的数学工具，用于
07-30
在MATLAB中，NURBS（非均匀有理B样条）是一种强大的数学工具，用于表示和处理复杂的曲线和曲面。NURBS在计算机图形学、CAD（计算机辅助设计）、CAM（计算机辅助制造）等领域有着广泛的应用。下面将详细探讨MATLAB中NURBS的绘制方法以及相关知识点。 我们需要理解NURBS的基本概念。NURBS是B样条（B-Spline）的一种扩展，其特殊之处在于引入了权重因子，使得曲线和曲面可以在不均匀的参数空间中进行平滑插值。这种灵活性使得NURBS在处理非均匀数据时尤为有效。 在MATLAB中，可以使用`nurbs`函数创建NURBS对象，它接受控制点、权值、 knot向量等参数。控制点定义了NURBS曲线的基本形状，而knot向量决定了曲线的平滑度和分布。权值则影响曲线通过控制点的方式，大的权值会使曲线更靠近该点。 例如，我们可以使用以下代码创建一个简单的NURBS曲线： ```matlab % 定义控制点 controlPoints = [1 1; 2 2; 3 1; 4 2]; % 定义knot向量 knotVector = [0 0 0 1 1 1]; % 定义权值（默认为1，如果未指定） weights = ones(size(controlPoints,1),1); % 创建NURBS对象 nurbsObj = nurbs(controlPoints, weights, knotVector); ``` 然后，我们可以用`plot`函数来绘制NURBS曲线： ```matlab plot(nurbsObj); grid on; ``` `data_example.mat`可能包含了一个示例的NURBS数据集，其中可能包含了控制点坐标、权值和knot向量。我们可以通过加载这个数据文件来进一步研究NURBS的绘制： ```matlab load('data_example.mat'); % 加载数据 nurbsData = struct2cell(data_example); % 转换为cell数组 % 解析数据 controlPoints = nurbsData{1}; weights = nurbsData{2}; knotVector = nurbsData{3}; % 创建并绘制NURBS曲线 nurbsObj = nurbs(controlPoints, weights, knotVector); plot(nurbsObj); grid on; ``` MATLAB还提供了其他与NURBS相关的函数，如`evalnurbs`用于评估NURBS曲线上的点，`isoparm`用于生成NURBS曲面上的等参线，以及`isocurve`用于在NURBS曲面上提取特定参数值的曲线。这些工具对于分析和操作NURBS对象非常有用。 MATLAB中的NURBS功能允许用户方便地创建、编辑和可视化复杂的曲线和曲面。通过对控制点、knot向量和权值的调整，可以精确地控制NURBS的形状和行为，从而满足各种工程和设计需求。通过深入理解和熟练掌握这些工具，可以在MATLAB环境中实现高效的NURBS建模和分析。
写一个javasrtipt练习—制作时钟特效 ※ 需求描述 使用Date对象的getHours(0方法、getMinutes(方法和getSecondsO方法获取当前时间的小时、分和 秒，使用定时器调用计时器函数模拟时钟特效，效果如图3.17所示。
05-25
很高兴为您提供这个练习，以下是代码实现： HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>时钟特效</title> <style> .clock { width: 200px; height: 200px; border-radius: 50%; border: 10px solid black; position: relative; margin: 50px auto; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .hour, .minute, .second { position: absolute; top: 50%; left: 50%; transform-origin: center bottom; transform: translate(-50%, -100%); background-color: black; } .hour { width: 10px; height: 60px; border-radius: 5px; } .minute { width: 6px; height: 80px; border-radius: 3px; } .second { width: 2px; height: 90px; } </style> </head> <body> <div class="clock"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </div> <script src="clock.js"></script> </body> </html> ``` JavaScript部分： ```javascript function clock() { const deg = 6; const hr = document.querySelector('.hour'); const mn = document.querySelector('.minute'); const sc = document.querySelector('.second'); let day = new Date(); let hh = day.getHours() * 30; let mm = day.getMinutes() * deg; let ss = day.getSeconds() * deg; hr.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`; mn.style.transform = `rotateZ(${mm}deg)`; sc.style.transform = `rotateZ(${ss}deg)`; } setInterval(clock, 1000); ``` 首先定义了一个`clock`函数，其中`deg`变量表示每一秒钟时、分、秒针需要旋转的角度，`hr`、`mn`、`sc`变量分别对应时、分、秒针的DOM元素。 在函数内部，使用`Date()`对象获取当前时间的小时、分钟和秒钟，并计算出相应的角度。然后将这个角度应用到对应的DOM元素上，通过CSS的`transform`属性实现旋转。 最后使用`setInterval()`函数每隔一秒钟调用一次`clock`函数，实现时钟特效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值