制作时钟特效

在网页上显示当前时间 

<!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
    评论
在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建模和分析。
很高兴为您提供这个练习,以下是代码实现: 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、付费专栏及课程。

余额充值