• HTML计时事件（JavaScript）网页电子钟+网页计时器

     setTimeout("函数","未来指定毫秒后调用函数");

    clearTimeout(setTimeout("函数","未来指定毫秒后调用函数"));

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button onclick="starTime()">开始button>
    9. 		<button onclick="stopTime()">停止button>
    10. 		<script>
    11. 			var t;
    12. 			function fun() {
    13. 				alert("Hello World");
    14. 			}
    15.  
    16. 			function starTime() {
    17. 				t=setTimeout("fun()",300);
    18. 			}
    19. 			function stopTime()
    20. 			{
    21. 				clearTimeout(t);
    22. 				alert(t);
    23. 			}
    24. 		script>
    25. 	body>
    26. html>

     setInterval("fun()",3000);每隔指定时间调用

    clearInterval(t);取消setIntval()

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button onclick="starTime()">开始button>
    9. 		<button onclick="stopTime()">停止button>
    10. 		<script>
    11. 			var t;
    12. 			function fun() {
    13. 				alert("Hello World");
    14. 			}
    15.  
    16. 			function starTime() {
    17. 				t=setInterval("fun()",3000);
    18. 			}
    19. 			function stopTime()
    20. 			{
    21. 				clearInterval(t);
    22. 				alert(t);
    23. 			}
    24. 		script>
    25. 	body>
    26. html>

    计时器：

    三个功能  开始 复位 停止 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			div {
    8. 				height: 50px;
    9. 				width: 100px;
    10. 				background-color: skyblue;
    11. 				padding: auto;
    12. 				text-align: center;
    13. 				line-height: 50px;
    14. 				border: 2px solid black;
    15. 				position: relative;
    16. 				cursor: pointer;
    17. 				border-radius: 5px;
    18. 				font-weight: 200px;
    19. 				font-size: 20px;
    20. 			}
    21.  
    22. 			.start {
    23. 				top: 100px;
    24. 				right: -500px;
    25. 			}
    26.  
    27. 			.stop {
    28. 				top: 45px;
    29. 				right: -700px;
    30. 			}
    31.  
    32. 			.zero {
    33. 				top: -100px;
    34. 				right: -600px;
    35. 			}
    36.  
    37. 			.time {
    38. 				height: 100px;
    39. 				width: 300px;
    40. 				top: 50px;
    41. 				right: -500px;
    42. 				font-size: 80px;
    43. 				text-align: center;
    44. 				line-height: 100px;
    45. 				font-family: "宋体";
    46. 				font-weight: 1000;
    47. 			}
    48.  
    49. 			div:hover {
    50. 				background-color: darkgray;
    51. 			}
    52. 		style>
    53. 	head>
    54. 	<body>
    55. 		<div class="start" onclick="start()">开始div>
    56. 		<div class="stop" onclick="stop()">停止div>
    57. 		<div class="zero" onclick="reset()">复位div>
    58. 		<div class="time" id="time">0div>
    59. 		<script>
    60. 			var s = 0;
    61. 			var t;
    62.  
    63. 			function start() //开始计时
    64. 			{
    65. 				if (!t)
    66. 					t = setInterval("change()", 1000);
    67. 			}
    68.  
    69. 			function reset() //复位
    70. 			{
    71. 				clearInterval(t);
    72. 				s = -1;
    73. 				change();
    74. 				t = null;
    75. 			}
    76.  
    77. 			function stop() // 停止计时
    78. 			{
    79. 				clearInterval(t);
    80. 				t = null;
    81. 			}
    82.  
    83. 			function change() {
    84. 				s++;
    85. 				var x = document.getElementById("time");
    86. 				x.innerHTML = s;
    87. 			}
    88. 		script>
    89. 	body>
    90. html>

    电子钟：每秒更新一次页面 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>电子表title>
    6. 		<style>
    7. 			.table {
    8. 				height: 100px;
    9. 				width: 500px;
    10. 				background-color: grey;
    11. 				text-align: center;
    12. 				margin: auto;
    13. 				border-radius: 5px;
    14. 				border: 4px solid black;
    15. 				font-size: 20px;
    16. 			}
    17. 		style>
    18. 		<script>
    19. 			function updateTime() {
    20. 				var date = new Date();
    21. 				document.getElementById("year").innerText = date.getFullYear();
    22. 				document.getElementById("month").innerText = date.getMonth() + 1;
    23. 				document.getElementById("day").innerText = date.getDate();
    24. 				document.getElementById("hour").innerText = date.getHours();
    25. 				document.getElementById("minutes").innerText = date.getMinutes();
    26. 				document.getElementById("second").innerText = date.getSeconds();
    27. 			}
    28.  
    29. 			setInterval(updateTime, 1000);
    30. 		script>
    31. 	head>
    32. 	<body onload="updateTime()">
    33. 		<table class="table">
    34. 			<th id="year">th>
    35. 			<th>年th>
    36.  
    37. 			<th id="month">th>
    38. 			<th>月th>
    39.  
    40. 			<th id="day">th>
    41. 			<th>日th>
    42.  
    43. 			<th id="hour">th>
    44. 			<th>:th>
    45. 			<th id="minutes">th>
    46. 			<th>:th>
    47. 			<th id="second">th>
    48. 		table>
    49. 	body>
    50. html>

     

     

  • 相关阅读:
    mybatis-plus通用业务分页查询封装
    黑马旅游网-JavaWeb学成练手小项目-包含老师资料
    html在线阅读小说网页制作模板 小说书籍网页设计 大学生静态HTML网页源码 dreamweaver网页作业 简单网页课程成品
    记忆化搜索 day48
    算法为屠龙刀，设计模式为倚天剑
    OpenCV-基于阴影勾勒的图纸清晰度增强算法
    Sality 病毒的驱动模块分析报告
    207.课程表
    Unity做360度全景预览
    SQL注入之宽字节注入
  • 原文地址：https://blog.csdn.net/m0_71385141/article/details/133281093