zl程序教程

您现在的位置是:首页 >  其它

当前栏目

jshtml滚动时间横向显示demo效果示例(整理)

时间 显示 示例 效果 整理 Demo 滚动 横向
2023-09-14 09:04:06 时间
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滚动时间显示</title>
		<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
		<style>
			marquee {
				background-color: #00bc12;
				width: 1000px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<marquee behavior="scroll" direction="left">
			<p id="time"></p>
		</marquee>
		<div style="width: 100%;text-align: center;">(marquee )此标签某些浏览器不兼容</div>
		<script>
			function time() {
				function format(i) {
					return (i < 10 ? "0" + i : i);
				}
				var date = new Date();
				var year = date.getFullYear();
				var month = format(date.getMonth() + 1);
				var day = format(date.getDate());
				var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				var week = arr[date.getDay()];
				var hour = format(date.getHours());
				var minute = format(date.getMinutes());
				var second = format(date.getSeconds());
				document.getElementById("time").innerHTML = "你好,现在时间是:" + year + "年" + month + "月" + day + "日" + " " + week +
					hour + "点" + minute + "分" + second + "秒"
			}
			var interval = setInterval(time, 100);
		</script>


	</body>
</html>