• JavaScript实现动态时钟显示

    目录

    动态时钟显示效果

     代码实现

    1.创建html文件（时钟显示.html）

    2.设置html标签

    3.设置html标签的CSS样式

    4.设置JavaScript

    1)创建函数和Date

    2）获取date变量中的年、月、日，拼接成日期

    3）获取date变量中的小时、分钟、秒和日期，拼接成时间

    4）获取节点并向节点中添加日期和时间

    5）调用自定义函数dateTime和setInterval函数，实现动态时钟显示效果

    动态时钟显示效果

     代码实现

    1.创建html文件（时钟显示.html）

    2.设置html标签

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>动态时钟显示title>
    6. 	head>
    7. 	<body>
    8. 		<div class="div">
    9. 			<div class="firstDiv">div>
    10. 			<div class="lastDiv">div>
    11. 		div>
    12. 	body>
    13. html>

    3.设置html标签的CSS样式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>动态时钟显示title>
    6.         <style>
    7. 			.div{
    8. 				/* 宽度400 */
    9. 				width: 400px;
    10. 				/*高度400  */
    11. 				height: 400px;
    12. 				/* 设置背景色 */
    13. 				background-color: cornflowerblue;
    14. 				/* 设置边框圆角200 */
    15. 				border-radius: 200px;
    16. 				/* 设置字体粗细700 */
    17. 				font-weight: 700;
    18. 				/* 设置文本颜色白色 */
    19. 				color: white;
    20. 				/* 设置外边距：上下100px，左右剧中  */
    21. 				margin: 100px auto;
    22. 			}
    23. 			.firstDiv{
    24. 				/* 设置宽度300 */
    25. 				width: 300px;
    26. 				/* 设置高度100 */
    27. 				height: 100px;
    28. 				/* 设置行高100 */
    29. 				line-height: 100px;
    30. 				/* 设置内容剧中显示 */
    31. 				text-align: center;
    32. 				/* 设置字体大小30 */
    33. 				font-size: 30px;
    34. 				/* 设置相对定位 */
    35. 				position: relative;
    36. 				/* 设置顶端移动100 */
    37. 				top: 100px;
    38. 				/* 设置左移动50 */
    39. 				left: 50px;
    40. 			}
    41. 			.lastDiv{
    42. 				/* 设置宽度300 */
    43. 				width: 300px;
    44. 				/* 设置高度100 */
    45. 				height: 100px;
    46. 				/* 设置内容剧中显示 */
    47. 				text-align: center;
    48. 				/* 设置字体大小30 */
    49. 				font-size: 30px;
    50. 				/* 设置相对定位 */
    51. 				position: relative;
    52. 				/* 设置顶端移动100 */
    53. 				top: 100px;
    54. 				/* 设置左移动50 */
    55. 				left: 50px;
    56. 			}
    57. 		style>
    58. 	head>
    59. 	<body>
    60. 		<div class="div">
    61. 			<div class="firstDiv">div>
    62. 			<div class="lastDiv">div>
    63. 		div>
    64. 	body>
    65. html>

    4.设置JavaScript

    1)创建函数和Date

            Date返回的是中国标准时间：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>动态时钟显示title>
    6.         <style>
    7. 			.div{
    8. 				/* 宽度400 */
    9. 				width: 400px;
    10. 				/*高度400  */
    11. 				height: 400px;
    12. 				/* 设置背景色 */
    13. 				background-color: cornflowerblue;
    14. 				/* 设置边框圆角200 */
    15. 				border-radius: 200px;
    16. 				/* 设置字体粗细700 */
    17. 				font-weight: 700;
    18. 				/* 设置文本颜色白色 */
    19. 				color: white;
    20. 				/* 设置外边距：上下100px，左右剧中  */
    21. 				margin: 100px auto;
    22. 			}
    23. 			.firstDiv{
    24. 				/* 设置宽度300 */
    25. 				width: 300px;
    26. 				/* 设置高度100 */
    27. 				height: 100px;
    28. 				/* 设置行高100 */
    29. 				line-height: 100px;
    30. 				/* 设置内容剧中显示 */
    31. 				text-align: center;
    32. 				/* 设置字体大小30 */
    33. 				font-size: 30px;
    34. 				/* 设置相对定位 */
    35. 				position: relative;
    36. 				/* 设置顶端移动100 */
    37. 				top: 100px;
    38. 				/* 设置左移动50 */
    39. 				left: 50px;
    40. 			}
    41. 			.lastDiv{
    42. 				/* 设置宽度300 */
    43. 				width: 300px;
    44. 				/* 设置高度100 */
    45. 				height: 100px;
    46. 				/* 设置内容剧中显示 */
    47. 				text-align: center;
    48. 				/* 设置字体大小30 */
    49. 				font-size: 30px;
    50. 				/* 设置相对定位 */
    51. 				position: relative;
    52. 				/* 设置顶端移动100 */
    53. 				top: 100px;
    54. 				/* 设置左移动50 */
    55. 				left: 50px;
    56. 			}
    57. 		style>
    58. 	head>
    59. 	<body>
    60. 		<div class="div">
    61. 			<div class="firstDiv">div>
    62. 			<div class="lastDiv">div>
    63. 		div>
    64. 	body>
    65.     <script>
    66. 		function dateTime(){
    67.             //获取时间保存到date变量
    68. 			var date = new Date();
    69.         }
    70.     script>
    71. html>

    2）获取date变量中的年、月、日，拼接成日期

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>动态时钟显示title>
    6.         <style>
    7. 			.div{
    8. 				/* 宽度400 */
    9. 				width: 400px;
    10. 				/*高度400  */
    11. 				height: 400px;
    12. 				/* 设置背景色 */
    13. 				background-color: cornflowerblue;
    14. 				/* 设置边框圆角200 */
    15. 				border-radius: 200px;
    16. 				/* 设置字体粗细700 */
    17. 				font-weight: 700;
    18. 				/* 设置文本颜色白色 */
    19. 				color: white;
    20. 				/* 设置外边距：上下100px，左右剧中  */
    21. 				margin: 100px auto;
    22. 			}
    23. 			.firstDiv{
    24. 				/* 设置宽度300 */
    25. 				width: 300px;
    26. 				/* 设置高度100 */
    27. 				height: 100px;
    28. 				/* 设置行高100 */
    29. 				line-height: 100px;
    30. 				/* 设置内容剧中显示 */
    31. 				text-align: center;
    32. 				/* 设置字体大小30 */
    33. 				font-size: 30px;
    34. 				/* 设置相对定位 */
    35. 				position: relative;
    36. 				/* 设置顶端移动100 */
    37. 				top: 100px;
    38. 				/* 设置左移动50 */
    39. 				left: 50px;
    40. 			}
    41. 			.lastDiv{
    42. 				/* 设置宽度300 */
    43. 				width: 300px;
    44. 				/* 设置高度100 */
    45. 				height: 100px;
    46. 				/* 设置内容剧中显示 */
    47. 				text-align: center;
    48. 				/* 设置字体大小30 */
    49. 				font-size: 30px;
    50. 				/* 设置相对定位 */
    51. 				position: relative;
    52. 				/* 设置顶端移动100 */
    53. 				top: 100px;
    54. 				/* 设置左移动50 */
    55. 				left: 50px;
    56. 			}
    57. 		style>
    58. 	head>
    59. 	<body>
    60. 		<div class="div">
    61. 			<div class="firstDiv">div>
    62. 			<div class="lastDiv">div>
    63. 		div>
    64. 	body>
    65.     <script>
    66. 		function dateTime(){
    67.             //获取时间保存到date变量
    68. 			var date = new Date();
    69. 			console.log(date);
    70. 			//获取date中的年、月、日
    71. 			var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
    72.         }
    73.     script>
    74. html>

    3）获取date变量中的小时、分钟、秒和日期，拼接成时间

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>动态时钟显示title>
    6.         <style>
    7. 			.div{
    8. 				/* 宽度400 */
    9. 				width: 400px;
    10. 				/*高度400  */
    11. 				height: 400px;
    12. 				/* 设置背景色 */
    13. 				background-color: cornflowerblue;
    14. 				/* 设置边框圆角200 */
    15. 				border-radius: 200px;
    16. 				/* 设置字体粗细700 */
    17. 				font-weight: 700;
    18. 				/* 设置文本颜色白色 */
    19. 				color: white;
    20. 				/* 设置外边距：上下100px，左右剧中  */
    21. 				margin: 100px auto;
    22. 			}
    23. 			.firstDiv{
    24. 				/* 设置宽度300 */
    25. 				width: 300px;
    26. 				/* 设置高度100 */
    27. 				height: 100px;
    28. 				/* 设置行高100 */
    29. 				line-height: 100px;
    30. 				/* 设置内容剧中显示 */
    31. 				text-align: center;
    32. 				/* 设置字体大小30 */
    33. 				font-size: 30px;
    34. 				/* 设置相对定位 */
    35. 				position: relative;
    36. 				/* 设置顶端移动100 */
    37. 				top: 100px;
    38. 				/* 设置左移动50 */
    39. 				left: 50px;
    40. 			}
    41. 			.lastDiv{
    42. 				/* 设置宽度300 */
    43. 				width: 300px;
    44. 				/* 设置高度100 */
    45. 				height: 100px;
    46. 				/* 设置内容剧中显示 */
    47. 				text-align: center;
    48. 				/* 设置字体大小30 */
    49. 				font-size: 30px;
    50. 				/* 设置相对定位 */
    51. 				position: relative;
    52. 				/* 设置顶端移动100 */
    53. 				top: 100px;
    54. 				/* 设置左移动50 */
    55. 				left: 50px;
    56. 			}
    57. 		style>
    58. 	head>
    59. 	<body>
    60. 		<div class="div">
    61. 			<div class="firstDiv">div>
    62. 			<div class="lastDiv">div>
    63. 		div>
    64. 	body>
    65.     <script>
    66. 		function dateTime(){
    67.             //获取时间保存到date变量
    68. 			var date = new Date();
    69. 			console.log(date);
    70. 			//获取date中的年、月、日
    71. 			var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
    72.  
    73. 			//将星期日~星期一保存到数组
    74. 			var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    75. 			//获取date中的小时，如果小于9，则在前面拼接一个0
    76. 			var hours = date.getHours()>9?date.getHours():'0'+date.getHours();
    77. 			//获取date中的分钟，如果小于9，则在前面拼接一个0
    78. 			var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
    79. 			//获取date中的秒，如果小于9，则在前面拼接一个0
    80. 			var seconds = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
    81. 			
    82. 			//拼接时分秒和星期
    83. 			var times = hours+'：'+minutes+'：'+seconds+' '+week[date.getDay()];
    84.         }
    85.     script>
    86. html>

    4）获取节点并向节点中添加日期和时间

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>动态时钟显示title>
    6.         <style>
    7. 			.div{
    8. 				/* 宽度400 */
    9. 				width: 400px;
    10. 				/*高度400  */
    11. 				height: 400px;
    12. 				/* 设置背景色 */
    13. 				background-color: cornflowerblue;
    14. 				/* 设置边框圆角200 */
    15. 				border-radius: 200px;
    16. 				/* 设置字体粗细700 */
    17. 				font-weight: 700;
    18. 				/* 设置文本颜色白色 */
    19. 				color: white;
    20. 				/* 设置外边距：上下100px，左右剧中  */
    21. 				margin: 100px auto;
    22. 			}
    23. 			.firstDiv{
    24. 				/* 设置宽度300 */
    25. 				width: 300px;
    26. 				/* 设置高度100 */
    27. 				height: 100px;
    28. 				/* 设置行高100 */
    29. 				line-height: 100px;
    30. 				/* 设置内容剧中显示 */
    31. 				text-align: center;
    32. 				/* 设置字体大小30 */
    33. 				font-size: 30px;
    34. 				/* 设置相对定位 */
    35. 				position: relative;
    36. 				/* 设置顶端移动100 */
    37. 				top: 100px;
    38. 				/* 设置左移动50 */
    39. 				left: 50px;
    40. 			}
    41. 			.lastDiv{
    42. 				/* 设置宽度300 */
    43. 				width: 300px;
    44. 				/* 设置高度100 */
    45. 				height: 100px;
    46. 				/* 设置内容剧中显示 */
    47. 				text-align: center;
    48. 				/* 设置字体大小30 */
    49. 				font-size: 30px;
    50. 				/* 设置相对定位 */
    51. 				position: relative;
    52. 				/* 设置顶端移动100 */
    53. 				top: 100px;
    54. 				/* 设置左移动50 */
    55. 				left: 50px;
    56. 			}
    57. 		style>
    58. 	head>
    59. 	<body>
    60. 		<div class="div">
    61. 			<div class="firstDiv">div>
    62. 			<div class="lastDiv">div>
    63. 		div>
    64. 	body>
    65.     <script>
    66. 		function dateTime(){
    67.             //获取时间保存到date变量
    68. 			var date = new Date();
    69. 			console.log(date);
    70. 			//获取date中的年、月、日
    71. 			var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
    72.  
    73. 			//将星期日~星期一保存到数组
    74. 			var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    75. 			//获取date中的小时，如果小于9，则在前面拼接一个0
    76. 			var hours = date.getHours()>9?date.getHours():'0'+date.getHours();
    77. 			//获取date中的分钟，如果小于9，则在前面拼接一个0
    78. 			var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
    79. 			//获取date中的秒，如果小于9，则在前面拼接一个0
    80. 			var seconds = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
    81. 			
    82. 			//拼接时分秒和星期
    83. 			var times = hours+'：'+minutes+'：'+seconds+' '+week[date.getDay()];
    84.  
    85.             //获取firstDiv节点
    86. 			var firstDivEle = document.querySelector('.firstDiv');
    87. 			//获取lastDiv节点
    88. 			var lastDivEle = document.querySelector('.lastDiv');
    89. 			
    90.  
    91. 			//向.firstDiv节点添加dates(年、月、日)
    92. 			firstDivEle.innerText=dates;
    93. 			//向.firstDiv节点添加timess(年、月、日)
    94. 			lastDivEle.innerText=times;
    95.         }
    96.     script>
    97. html>

    5）调用自定义函数dateTime和setInterval函数，实现动态时钟显示效果

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>动态时钟显示title>
    6.         <style>
    7. 			.div{
    8. 				/* 宽度400 */
    9. 				width: 400px;
    10. 				/*高度400  */
    11. 				height: 400px;
    12. 				/* 设置背景色 */
    13. 				background-color: #ccc;
    14. 				/* 设置边框圆角200 */
    15. 				border-radius: 200px;
    16. 				/* 设置字体粗细700 */
    17. 				font-weight: 700;
    18. 				/* 设置文本颜色白色 */
    19. 				color: white;
    20. 				/* 设置外边距：上下100px，左右剧中  */
    21. 				margin: 100px auto;
    22. 			}
    23. 			.firstDiv{
    24. 				/* 设置宽度300 */
    25. 				width: 300px;
    26. 				/* 设置高度100 */
    27. 				height: 100px;
    28. 				/* 设置行高100 */
    29. 				line-height: 100px;
    30. 				/* 设置内容剧中显示 */
    31. 				text-align: center;
    32. 				/* 设置字体大小30 */
    33. 				font-size: 30px;
    34. 				/* 设置相对定位 */
    35. 				position: relative;
    36. 				/* 设置顶端移动100 */
    37. 				top: 100px;
    38. 				/* 设置左移动50 */
    39. 				left: 50px;
    40. 			}
    41. 			.lastDiv{
    42. 				/* 设置宽度300 */
    43. 				width: 300px;
    44. 				/* 设置高度100 */
    45. 				height: 100px;
    46. 				/* 设置内容剧中显示 */
    47. 				text-align: center;
    48. 				/* 设置字体大小30 */
    49. 				font-size: 30px;
    50. 				/* 设置相对定位 */
    51. 				position: relative;
    52. 				/* 设置顶端移动100 */
    53. 				top: 100px;
    54. 				/* 设置左移动50 */
    55. 				left: 50px;
    56. 			}
    57. 		style>
    58. 	head>
    59. 	<body>
    60. 		<div class="div">
    61. 			<div class="firstDiv">div>
    62. 			<div class="lastDiv">div>
    63. 		div>
    64. 	body>
    65. 	<script>
    66. 		function dateTime(){
    67.             //获取时间保存到date变量
    68. 			var date = new Date();
    69. 			
    70. 			//获取date中的年、月、日
    71. 			var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
    72.  
    73. 			//将星期日~星期一保存到数组
    74. 			var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    75. 			//获取date中的小时，如果小于9，则在前面拼接一个0
    76. 			var hours = date.getHours()>9?date.getHours():'0'+date.getHours();
    77. 			//获取date中的分钟，如果小于9，则在前面拼接一个0
    78. 			var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
    79. 			//获取date中的秒，如果小于9，则在前面拼接一个0
    80. 			var seconds = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
    81. 			
    82. 			//拼接时分秒和星期
    83. 			var times = hours+'：'+minutes+'：'+seconds+' '+week[date.getDay()];
    84.  
    85. 			//获取firstDiv节点
    86. 			var firstDivEle = document.querySelector('.firstDiv');
    87. 			//获取lastDiv节点
    88. 			var lastDivEle = document.querySelector('.lastDiv');
    89. 			
    90. 			//向.firstDiv节点添加dates(年、月、日)
    91. 			firstDivEle.innerText=dates;
    92. 			//向.lastDiv节点添加timess(时、分、秒、星期)
    93. 			lastDivEle.innerText=times;
    94.  
    95.         }
    96.             //调用函数，执行一次
    97. 	    	dateTime();
    98. 		    //调用setInterval函数，实现始终计时，
    99. 		    setInterval(dateTime,1000);
    100.     script>
    101. html>
  • 相关阅读:
    [附源码]Python计算机毕业设计Django高校实验室仪器设备管理系统
    一起学习ML和DL中常用的几种loss函数
    CentOS7 安装K8S 单节点
    新手如何使用腾讯云云服务器详细教程
    03 自己写Keil ARM M3汇编的boot，并成功引导main进行打印输出
    【技术精粹】AppGallery Connect开发精品实战课
    深入浅出理解ResNet网络模型+PyTorch实现
    Spring Cloud 篇
    Nginx实战
    ZZULIOJ：1191-1199
  • 原文地址：https://blog.csdn.net/m0_57051895/article/details/127803400