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

#效果图
使用javascript制作 滚动字幕及时钟_第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>

你可能感兴趣的:(java基础)