• JS应用案例：时钟，国庆倒计时

    时钟案例：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			div {
    8. 				width: 400px;
    9. 				height: 100px;
    10. 				background-color: #ccc;
    11. 				border: 1px solid #f00;
    12. 				margin: 130px auto;
    13. 				text-align: center;
    14. 				line-height: 100px;
    15. 				font-size: 24px;
    16. 			}
    17. 		style>
    18. 	head>
    19. 	<body>
    20. 		<div>div>
    21. 	body>
    22.  
    23. 	<script>
    24. 		function dateTime() {
    25. 			//获取当前系统时间，并且拼接成“xxxx年xx月xx日 xx:xx:xx”的形式
    26. 			var date = new Date();
    27. 			console.log(date);
    28. 			//获取时分秒，如果时分秒是一位数字，给它拼接成两位数字
    29. 			var hour = date.getHours();
    30. 			if(hour<10){
    31. 				hour = '0'+hour;
    32. 			}
    33. 			
    34. 			var minutes = date.getMinutes();
    35. 			if(minutes<10){
    36. 				minutes ='0'+minutes;
    37. 			}
    38. 			
    39. 			var seconds =date.getSeconds();
    40. 			if(seconds<10){
    41. 			seconds = '0'+seconds;	
    42. 			}
    43. 			
    44. 			var timeStr = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " + hour +
    45. 				":" + minutes + ":" + seconds;
    46.  
    47. 			//获取div元素，并将timeStr存储到div元素中
    48. 			var divEle = document.querySelector('div');
    49. 			divEle.innerHTML = timeStr;
    50. 		}
    51.  
    52. 		//注意：setInterval(要调用的函数,间隔的毫秒是)里第一个参数如果不是直接定义的函数，而是调用其它的函数，只需要写函数名称，不要带()
    53. 		dateTime();
    54. 		setInterval(dateTime, 1000);
    55. 	script>
    56.  
    57. html>

     

     

     

     

    国庆倒计时案例：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			div{
    8. 				width: 600px;
    9. 				height: 200px;
    10. 				border: 1px solid black;
    11. 				margin: 150px auto;
    12. 				text-align: center;
    13. 				line-height: 200px;
    14. 				font-size: 24px;
    15. 				background-image: url(img/guoqin.jpg);
    16.  
    17. 			}
    18. 		style>
    19. 	head>
    20. 	<body>
    21. 		<div> div>
    22. 	body>
    23. 	<script>
    24. 		function datetime(){
    25. 			var dateFur = new Date('2022','9','1');
    26. 			var fs = dateFur.getTime();
    27. 			console.log(dateFur);
    28. 			console.log(fs);
    29. 			var dateNow = new Date();
    30. 			var ns = dateNow.getTime();
    31. 			console.log(dateNow);
    32. 			console.log(ns);
    33. 			
    34. 			var time = fs - ns;
    35. 			
    36. 			console.log(time);
    37. 			
    38. 			days = parseInt(time/(24*60*60*1000)); 
    39. 			if(days<10){
    40. 				days = '0'+days;
    41. 			}
    42. 			hours = parseInt((time%(24*60*60*1000))/(60*60*1000));
    43. 			// console.log(hours);
    44. 			if(hours<10){
    45. 				hours = '0'+hours;
    46. 			}
    47. 			minutes = parseInt(((time%(24*60*60*1000))%(60*60*1000))/(60*1000));
    48. 			// console.log(minutes);
    49. 			if(minutes<10){
    50. 				minutes = '0'+minutes;
    51. 			}
    52. 			seconds = parseInt((((time%(24*60*60*1000))%(60*60*1000))%(60*1000))/1000);
    53. 			// console.log(seconds);
    54. 			if(seconds<10){
    55. 				seconds = '0'+seconds;
    56. 			}
    57. 			var timestr = "十一倒计时："+days+"天"+hours+"时"+minutes+"分"+seconds+"秒";
    58. 			// console.log(timestr);
    59. 			
    60. 			var divEle = document.querySelector('div');
    61. 			divEle.innerHTML = timestr;
    62. 		}
    63. 		
    64. 		datetime();
    65. 		setInterval(datetime,1000);
    66. 		
    67. 	script>
    68. html>

     

     

  • 相关阅读:
    LeetCode 2678. 老人的数目【数组】简单
    【Android安全】Kotlin基础
    开发模式-敏捷开发
    Linux安装Nginx
    10、IOC 之类路径扫描和托管组件
    CentOS7下搭建Hadoop(3.3.4)集群
    jbase打印完善
    百度小程序模板制作_百度小程序模板平台
    拆分整数为2的幂次项和 → 理解多重背包问题二进制优化的核心思想
    C和C++的区别(3) const增强
  • 原文地址：https://blog.csdn.net/qq_51810428/article/details/126953568