JavaScript的时间动态表现效果

最新推荐文章于 2023-07-01 15:46:05 发布
最新推荐文章于 2023-07-01 15:46:05 发布
阅读量131 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44848852/article/details/108886645
版权

效果如下
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>Time</title>
	<style type="text/css">
		body {
			background:#F0FFFF url(wave.jpg) no-repeat fixed center;
		}
		.div1 {
			position: absolute;
			bottom: 0.3em;
		}
	</style>
	<script type="text/javascript" language="javascript">
		//时分秒
		function now(){
			var n1 = new Date();
			var h = n1.getHours();
			var m = n1.getMinutes();
			var s = n1.getSeconds();
			m=checktime(m);
			s=checktime(s);
			document.getElementById("aa").innerHTML=h+":"+m+":"+s;
			t = setTimeout(function(){now()},500);

			//星期几
			var week = new Array(7);
			var weekday1 = new Date();
			var x = weekday1.getDay();
			week[0]="日";
			week[1]="一";
			week[2]="二";
			week[3]="三";
			week[4]="四";
			week[5]="五";
			week[6]="六";
			document.getElementById("bb").innerHTML="星期"+ week[x];

			//年月日
			var y = new Date();
			var x = y.getMonth()+1;
			var x1 = y.getUTCFullYear()+"年"+x+"月"+y.getDate()+"\t";
			document.getElementById("cc").innerHTML = x1 ;
		}
		function checktime(i){
			if(i<10){
				i="0"+i;
			}
			return i;
		}		
	</script>
</head>
<body onload="now()">
	<div class="div1" >
	<span id="cc"></span>	
	<span id="aa"></span>
	<span id="bb"></span>
	</div>
</body>
</html>
阿宝逃离地球
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript的荧光字效果
10-31
JavaScript荧光字效果是通过应用CSS滤镜来实现的一种视觉特效，主要在网页上用于吸引用户的注意力或增强文本的表现力。这种效果在浏览器支持CSS滤镜的环境下可以工作，尤其在早期的Internet Explorer版本中常见，...
JavaScript网页制作特殊效果用随机数
10-30
跳动文字效果是指使用JavaScript语言使文字在网页中跳动，产生动态效果。实现跳动文字效果需要使用Math.random()函数产生随机数，然后使用Math.floor()函数将随机数转换为整数，以改变文字大小和颜色。同时，使用...
JavaScript实现动态时间效果
小荷才露尖尖角
01-21 321
首先说明JavaScript日期相关的一些操作。 1.创建日期对象      var dateObj = new Date()//返回当前系统时间，Thu Jan 20 2011 23:25:24 GMT+0800 2.获取时针数字    dateObj.getHours() // 23   3.获取分针数字    dateObj.getMinutes() //25   4.获...
Javascript实践之时间显示效果
北极星小王子
05-14 284
那么我们如何使用这个对象呢？ var mediate = new Date() 先通过程序试下小试牛刀：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>当前系统时间</title> <script language="javascript" type="text/javascrip
用js实现时间效果
charlene0824的博客
11-27 469
window.onload=function(){ showTime(); } function format(num){ if(num<10){ num="0"+num; }return num; } function showTime(){ var getD=new Array(); getD[0]="星期日"; getD[1]="星期一"; get
js实时时间效果（简单版）
小静子的博客
08-30 1442
转自：https://blog.csdn.net/TonyTonyFun/article/details/51842968 用JS实现XXXX年XX月XX日 星期X XX时XX分XX秒 效果   效果 ： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
使用js实现时钟效果
少年休闲海
01-16 4423
首先在单元格中输入下面的代码，然后使用html显示内容。 这个宽高可以根据自己需要填。 然后在预览方式中添加加载结束事件： var dom=document.getElementById("view"); var ctx=dom.getContext("2d"); var width=ctx.canvas.width; var height=ctx.canvas.height; va
Javascript 遮罩层和加载效果代码
10-27
JavaScript 遮罩层与加载效果是网页动态交互中常用的技术，它们主要用于提供更好的用户体验，尤其是在数据加载或处理过程中。遮罩层通常用于覆盖整个页面，使得用户在等待时无法进行其他操作，而加载效果则通常表现...
11个震撼的javascript网页效果
09-26
5. **时间线展示**：利用JavaScript，可以创建出动态的时间轴，以动画形式展示事件或历史进程，增加用户对内容的理解和兴趣。 6. **全屏滑动面板**：全屏滑动面板常用于作品展示或介绍，JavaScript可以实现平滑过渡...
照片墙动态展示效果
11-01
总的来说，“照片墙动态展示效果”是通过结合JavaScript的交互性、CSS的视觉表现力以及现代Web技术的最佳实践来实现的。这种技术不仅提升了用户体验，还展示了Web开发中动态效果和用户交互设计的无限可能性。通过...
js实现实时的时间显示
weixin_45719052的博客
06-14 4945
在页面里动态显示日期与时间 1.小时按12小时制，不足两位的前面补0 2.根据获取的时间，判断上下午，用am，pm表示 js代码 觉得有用的话就点个赞吧
原生JS实现行走的时间效果
廖若星辰-LTY
10-22 252
本文主要介绍使用原生 JavaScript 实现页面实时行走的时间效果，效果图如下： 由以上效果图可以看出时间是动态的，是每秒钟进行刷新显示的。那么话不多说，下面直接上源码： 时间：<span id="txt"></span> <script type="text/javascript"> // 页面刷新调用函数启动/刷新时间 showLeftTime() function showLeftTime().
html实现动态时间，以及动图动图效果
最新发布
qq_66922072的博客
07-01 2557
通过不断获取不断获取本地时间之后上传到html页面上实现setTimeout：用于定时执行某个函数参数1：运行函数参数2：时间参数（毫秒），规定n秒后执行Date对象：可以获取当前电脑的时间的对象document.querySelector(".shwoTime").innerHTML：通过class值（.showTime)定位，填充信息通过对png图片设置旋转实现动图效果/* 设置10s旋转完成，匀速旋转，一只旋转*//* 下面的这个是一个函数，自定义旋转方式 */from {
前端常见的时间转换方法合集+动态时钟效果实现
i-cat的博客
01-25 6912
如果实现钟表效果-动态实时显示时间？
用JS做一个简易的时间显示动态效果
weixin_46095138的博客
07-04 1261
用JS做一个时间动态显示效果
使用Javascript(js)技术实现动态时钟效果—北大青鸟
kkkliao1的博客
06-09 2759
使用Javascript(js)技术实现动态时钟效果—北大青鸟
js实现页面动态时间，滚动效果（年月日，小时、分钟、秒，星期，毫秒）
sweetllh的博客
04-19 6190
年月日放在一个div里面； 小时、分钟、秒放在一个div里面； 星期放在一个div里面； 毫秒放在一个div里面。 因为它们的时间设置不同或img类不同 html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js制作一个动态页面时间，滚动效果</title> <style type
Js实现实时显示系统时间（获取当前时间并显示）
热门推荐
琅枫的博客
04-19 4万+
js可以通过Date对象获取当前日期和时间，使用Date()获取系统当前时间，在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间，在使用innerHTM方法显示。 首先我们来了解一下js获取当前时间所需的一些方法： 获取当前时间： var d = new Date();//获取系统当前时间 获取特定格式的时间： 1、获取当前年份 getYear()方法：可以获取年份（2位或4位），其返回值是表示当前Date 对象的年份字段 说明：当年
JavaScript实现动态时间显示功能
a320976399的博客
10-29 1万+
一、基本思路 创建showTime()函数，利用JavaScript中的Date对象的属性及方法获取时间，利用Window对象的 setInterval() 方法按照指定的周期（以毫秒计）来调用函数或计算表达式。最后利用document对象实现在页面上显示。 二、代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>显示时间</title> <
JavaScript日期时间方法解析与应用
JavaScript与HTML的紧密结合，极大地丰富了网页的动态表现力。 JavaScript与Java虽然名字相似，但实际上两者是不同的语言。Java是SUN公司开发的面向对象的语言，而JavaScript则是基于对象和事件驱动的脚本语言。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值