使用javascript制作滚动字幕及时钟

最新推荐文章于 2024-04-07 09:57:37 发布

十里相思

最新推荐文章于 2024-04-07 09:57:37 发布

阅读量319

点赞数 1

分类专栏： java基础

本文链接：https://blog.csdn.net/weixin_43986060/article/details/88746491

版权

java基础专栏收录该内容

22 篇文章 1 订阅

订阅专栏

#效果图
在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span {
				line-height: 30px;
			}
		</style>
		<script>
			function display() {
				move();
				getTime();
			}

			function move() {
				var m = document.getElementById('t').innerText;
				m = m.substr(1, m.length - 1) + m.substr(0, 1);
				document.getElementById('t').innerText = m;
				setTimeout('move()', 1000);
			}

			function getTime() {
				var time = new Date();
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				var date = time.getDate();
				var hours = time.getHours();
				var minutes = time.getMinutes();
				var seconds = time.getSeconds();
				var day = time.getDay();
				//这里我用的是12小时制，也可以改成24小时制
				var r;
				if(hours > 12) {
					hours = hours - 12;
					r = 'PM';
				} else {
					r = 'AM';
				}
				
				if(hours < 10) {
					hours = '0'+hours;
				}
				if(minutes < 10) {
					minutes = '0'+minutes;
				}
				if(seconds < 10) {
					seconds = '0'+seconds;
				}
				
				switch(day) {
					case 0:
						day = '星期天';
						break;
					case 1:
						day = '星期一';
						break;
					case 2:
						day = '星期二';
						break;
					case 3:
						day = '星期三';
						break;
					case 4:
						day = '星期四';
						break;
					case 5:
						day = '星期五';
						break;
					case 6:
						day = '星期l六';
						break;
				}

				var s = year + '年' + month + '月' + date + '日' + ' ' + hours + ':' + minutes + ':' + seconds + ' ' + r + ' ' + day;
				document.getElementById('time').innerText = s;
				setTimeout('getTime()');
			}
		</script>
	</head>

	<body onload="return display()">
		<span id="t">你好，欢迎访问我的小作品！</span><br />
		<span id="time"></span>
	</body>

</html>

十里相思

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用javascript制作滚动字幕及时钟

#效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> span { line-height: 30px; } </style> <script...
复制链接

扫一扫