原生JS学习之秒表、日历
Tips：涉及知识点：Date setInterval DOM
秒表
效果图：
简单构造出草图
Html代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>时间Demo</title>
5 <meta charset="utf-8">
6 <link rel="stylesheet" type="text/css" href="css/time.css">
7 </head>
8 <body>
9 <div align="center">
10 <!-- 导航栏 -->
11 <div id = "nav">
12 <a href="#">闹钟</a>
13 <a href="#">计时器</a>
14 <a href="#" style="color:white">秒表</a>
15 </div>
16
17 <!-- 时钟 -->
18 <div id = "timer" align="center">
19 <br>
20 <span id = "title">Timer</span><br>
21 <span id = "tips" class = "timer"> M S </span><br>
22 <span id = "tim" class = "timer">00:00</span><br>
23 <span id = "s" class = "timer">00</span>
24 </div>
25 <!-- 底部按钮 -->
26 <div id = "footer">
27 <table>
28 <tr>
29 <td><button onclick = "start()" id = "start">开 始</button></td>
30 <td><button onclick = "stop()">暂 停</button></td>
31 <td><button onclick = "re()">复 位</button></td>
32 </tr>
33 </table>
34 </div>
35 </div>
36 <script type="text/javascript" src = "js/time.js"></script>
37 </body>
38 </html>
中间使用了大量的 <br> 是因为我目前不太会调这个细节，只好拿这些来补位
CSS代码
1 body{
2 background: black;
3 }
4 a{
5 color:gray;
6 text-decoration:none;
7 font-size:larger;
8 }
9 #nav{
10 border-bottom:1px solid orange;
11 width: 50%;
12 text-align: left;
13 padding-bottom: 10px;
14 }
15 #timer{
16 margin-top: 20px;
17 margin-bottom: 20px;
18 height: 250px;
19 width: 250px;
20 border-radius:50%;
21 border:5px dashed skyblue;
22 text-align: center;
23
24 }
25 #title{
26 color:gray;
27 font-size:xxx-large;
28 }
29 #tim{
30 font-size:xxx-large;
31 }
32 #tips{
33 font-size: x-large;
34 }
35 .timer{
36 color:white;
37 }
38 #s{
39 font-size:xx-large;
40 }
41 button{
42 background: orange;
43 color:gray;
44 width: 80px;
45 height: 30px;
46 border: none;
47 outline: none;
48 font-size:large;
49 }
50 button:hover{
51 color:black;
52 }
53 table{
54 width: 600px;
55 border-collapse: collapse;
56 border-spacing: 0;
57 table-layout: fixed;
58 text-align:center;
59
除了常见的样式，还加了一些现查的
比如
实现a标签去除原有样式： text-decoration:none;
按钮的边框去除
border: none;
outline: none;
JS实现
思路分析：
我第一下想象到的是Js的计时器，setInterval(),然后每10ms执行一次，然后是纯逻辑判断，不用任何内置对象。后来发现，如果是这样，那么会很复杂，判断条件也很多。
后来想到了Date对象，可以通过点击时与当前时间做差值运算，这样就少了很多边界条件的判断。
首先是取得节点，clc是用来获得计时器的标志位，方便后来停止
1 var time = document.getElementById("tim");
2 var ss = document.getElementById("s");
3 var clc = null;
开始按钮点击时进行的操作：
1 function start(){
2 clearInterval(clc);//防止点击两次之后，无法停止计时器的问题
3 let time2=new Date().getTime();
4 clc = setInterval(function(){
5 let times = new Date().getTime() - time2;
6 let minutes=Math.floor(times/60000);
7 let seconds=Math.floor((times-minutes*60000)/1000);
8 let ms=Math.floor((times-minutes*60000-seconds*1000)/10);
9 time.innerText = (minutes<10 ? "0" +minutes : minutes)+":"
10 +(seconds<10 ? "0"+seconds :seconds);
11 ss.innerText = ms<10?"0"+ms:ms;
12 }, 10);
13 }
new Date().getTime() 使用来获取当前时间到1970年1月1日的毫秒数
通过取余，取整，补零等简单的操作，就可以得到时间，然后每10毫秒渲染在页面上一次。
暂停和复位JS
1 function stop(){
2 clearInterval(clc);
3 }
4
5 function re(){
6 time.innerText = "00:00";
7 ss.innerText = "00";
8 }
到这里，功能基本实现，但是留下了一个疑问
秒表计时是按照点击开始的时间和每过10ms的时间计算得到的，那么再此点击开始，时间就会从0开。
但所给的最终效果只是一个图片，无法判断接下来要实现的功能。
如果扩展的话，可以加上一个参数，就是按下暂停的时间（页面上显示的）。
日历
效果图
这个结构也很明显，所以直接上手
Html代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>日历Demo</title>
6 <link rel="stylesheet" type="text/css" href="css/date.css">
7 </head>
8 <body>
9 <div id = "main" align="center">
10 <!-- 标题 -->
11 <div id = "title">
12 <h2>模拟日历</h2>
13 </div>
14
15 <!-- 输入框 -->
16 <div >
17 <span>年</span>
18 <input type="text" id = "year">
19 <span>月</span>
20 <input type="text" id = "month">
21 <span> </span>
22 <input type="button" id = "btn" value="生 成" onclick = "fun()">
23 </div>
24
25 <!-- 日历 -->
26 <div id = "calendar">
27
28 <div id = "date">
29 <span id = date2></span>
30 </div>
31 <div>
32 <table border = 0 id = "week" >
33 <tr>
34 <td>Sun</td>
35 <td>Mon</td>
36 <td>Tue</td>
37 <td>Wed</td>
38 <td>Thu</td>
39 <td>Fri</td>
40 <td>Sat</td>
41 </tr>
42 </table>
43 </div>
44 <div id = "month2">
45 <table id = "day" border ="1" cellpadding="0" cellspacing="0">
46 <tr>
47 <td></td>
48 <td></td>
49 <td></td>
50 <td></td>
51 <td></td>
52 <td></td>
53 <td></td>
54 </tr>
55 <tr>
56 <td></td>
57 <td></td>
58 <td></td>
59 <td></td>
60 <td></td>
61 <td></td>
62 <td></td>
63 </tr>
64 <tr>
65 <td></td>
66 <td></td>
67 <td></td>
68 <td></td>
69 <td></td>
70 <td></td>
71 <td></td>
72 </tr>
73 <tr>
74 <td></td>
75 <td></td>
76 <td></td>
77 <td></td>
78 <td></td>
79 <td></td>
80 <td></td>
81 </tr>
82 <tr>
83 <td></td>
84 <td></td>
85 <td></td>
86 <td></td>
87 <td></td>
88 <td></td>
89 <td></td>
90 </tr>
91 <tr>
92 <td></td>
93 <td></td>
94 <td></td>
95 <td></td>
96 <td></td>
97 <td></td>
98 <td></td>
99 </tr>
100 </table>
101 </div>
102 </div>
103 </div>
104
105 <script type="text/javascript" src = "js/date.js"></script>
106 </body>
107 </html>
CSS代码
1 body{
2 background: url(../img/img1.jpg);
3 Background-size:100%;
4 }
5 #main{
6 margin:30px auto;
7 height: 600px;
8 width: 700px;
9 background: rgba(255,255,255,0.5);
10 }
11 #title{
12 text-align: left;
13 padding-top: 5px;
14 padding-left: 20px;
15 }
16 #btn{
17 background: #036;
18 color: white;
19 border: none;
20 outline: none;
21 height: 30px;
22 width: 70px;
23 }
24 input{
25 height: 25px;
26 width: 180px;
27 }
28 #calendar{
29 width: 350px;
30 height:auto;
31 margin-top: 10px;
32 }
33 #date{
34 font-size:x-large;
35 height: 50px;
36 width: 100%;
37 background: #036;
38 border-radius: 5px;
39 margin: 0 auto;
40 color: white;
41 }
42
43 #week{
44 height: 50px;
45 width: 100%;
46 background: #ccc;
47 text-align: center;
48 font-weight:600;
49 }
50 #week tr td{
51 width: 50px;
52 }
53 #day{
54 width:100%;
55 background: #ccc;
56 text-align: center;
57 }
58 #day tr td{
59 height: 50px;
60 width: 50px;
61 }
62 .t{
63 background: white;
64 }
这些都做完，一个大概的轮廓就出来了
那么接下来，就是获取输入的年月，并渲染了
JS实现
思路分析
年月的获得，就是节点取值的问题，为了方便后续进行，我加了简单的正则判断
var year_reg = /^\d{1,4}$/;
var month_reg = /^1[0-2]$|[1-9]/;
然后我需要几个很关键的数据
首先是上个月的天数，因为在大多数情况下，第一行我需要用灰色显示上个月的几天。
同时考虑到如果是一月，那么上一月的年份也会换，所以也加了判断条件。
var lastDate = parseInt(month==1?31:new Date(year,month-1,0).getDate());
其次是当前月的天数，因为后面要获取到下个月开始的日期
var thisDate = parseInt(new Date(year,month,0).getDate());
然后是当前月第一天的星期
var thisDate_one = parseInt(new Date(year,month-1,1).getDay());
由于最后一个参数不是0，所以月份要-1（取值范围的问题）
然后是复杂的循环的拼（字符）串，这也是日历的核心
1 var str = "<table id = 'day' border ='1' cellpadding='0' cellspacing='0'>";
2 for(let i = 1;i<=6;i++){
3 str+="<tr>";
4 for(let j = 1;j<=7;j++){
5 if(i==1){
6 str+=j<thisDate_one+1?"<td>"+(lastDate-thisDate_one+j)+"</td>":"<td class='t'>"+(j-thisDate_one)+"</td>";
7 }else if(i>=5){
8 str+=(j-thisDate_one+(i-1)*7)>thisDate?"<td>"+(j-thisDate_one+(i-1)*7)%thisDate+"</td>":"<td class='t'>"+(j-thisDate_one+(i-1)*7)+"</td>";
9 }else{
10 str+="<td class='t'>"+(j-thisDate_one+(i-1)*7)+"</td>";
11 }
12 }
13 str+="</tr>";
14 }
15 str+="</table>";
16 day.innerHTML = str;
17 return;
最重要的就是第四行的for循环里面。
会有三种情况，就是首行，中间，尾行（1行或两行）
首行，判断i==1
然后再与第一天的星期相比，小于则执行上个月的循环。
拿2020年8月举例
第一天是周六，那么第一天之前，他的<td>里的数据就是上个月的天数 - 这个月的天数 + j（行号）
即
lastDate-thisDate_one+j
代码上加上了括号是因为NaN的问题
然后当前月的循环就是 行号-当前月的第一天
j - thisDate_one
第二个判断条件是尾行，我们知道从第五行开始，可能就进入了下个月，那么又要重新考虑逻辑
判断是否进入了下个月，需要判断是否大于当前月的天数，这里也使用了一个三目运算
str+=(j-thisDate_one+(i-1)*7)>thisDate?"<td>"+(j-thisDate_one+(i-1)*7)%thisDate+"</td>":"<td class='t'>"+(j-thisDate_one+(i-1)*7)+"</td>";
因为周数的迭代，所以要加上（ i - 1 ）* 7 同时巧妙的利用取余运算来得出<td>的内容
后面因为小于，按正常计算就可以
中间比较简单
str+="<td class='t'>"+(j-thisDate_one+(i-1)*7)+"</td>";
接下来是完整的JS代码
1 var year_reg = /^\d{1,4}$/;
2 var month_reg = /^1[0-2]$|[1-9]/;
3
4 function fun(){
5 var year = document.getElementById("year").value;
6 var month = document.getElementById("month").value;
7 if (year_reg.test(year)&&month_reg.test(month)) {
8 document.getElementById("date2").innerText = year+"年"+month+"月";
9 var thisDate = parseInt(new Date(year,month,0).getDate());
10 var lastDate = parseInt(month==1?31:new Date(year,month-1,0).getDate());
11 var day = document.getElementById("month2");
12 var thisDate_one = parseInt(new Date(year,month-1,1).getDay());
13 var str = "<table id = 'day' border ='1' cellpadding='0' cellspacing='0'>";
14 for(let i = 1;i<=6;i++){
15 str+="<tr>";
16 for(let j = 1;j<=7;j++){
17 if(i==1){
18 str+=j<thisDate_one+1?"<td>"+(lastDate-thisDate_one+j)+"</td>":"<td class='t'>"+(j-thisDate_one)+"</td>";
19 }else if(i>=5){
20 str+=(j-thisDate_one+(i-1)*7)>thisDate?"<td>"+(j-thisDate_one+(i-1)*7)%thisDate+"</td>":"<td class='t'>"+(j-thisDate_one+(i-1)*7)+"</td>";
21 }else{
22 str+="<td class='t'>"+(j-thisDate_one+(i-1)*7)+"</td>";
23 }
24 }
25 str+="</tr>";
26 }
27 str+="</table>";
28 day.innerHTML = str;
29 return;
30 }
31 alert("输入不合法");
32 return;
33 }
感谢您的阅读
原生JS学习之秒表、日历的更多相关文章
- 原生js学习 选择dom
连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure' ...
- 【京东详情页】——原生js学习之匿名函数
一.引言 在js模块中,要给每一个功能封装一个匿名函数.为了更好的理解什么是匿名函数,为什么要用匿名函数,我做了一些查阅和学习. 二.匿名函数 什么是:在创建时,不被任何变量引用的函数. 为什么:节约 ...
- 原生js 学习之array 数组
Array的原生方法: concat(): 连接两个或更多的数组哦 join(): 把数组的所有元素放在一个字符串中 pop():删除并返回数组的最后一个元素 push():向数组的末尾添加一个元素 ...
- 原生js学习笔记2
知识点: 1:关于this指向问题,如果有函数a(),直接a()那么this指向window,new a()指向函数本身. 2:关于null和undefined.两者如果用“==”则认为两者是相等的, ...
- 【学习】原生js学习笔记1：添加class和使input为不可用
<input type="checkbox" id="new_check" onChange="noUse()" checked> ...
- 原生js简易日历效果实现
这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...
- 原生js日历选择器，学习js面向对象开发日历插件
在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...
- 日历组件 原生js
自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...
- 原生JS研究：学习jquery源码，收集整理常用JS函数
原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...
随机推荐
- MQ-gogogo
1. RocketMQ https://github.com/alibaba/RocketMQ/wiki/quick-start 2. RabbitMQ https://www.rabbitmq.co ...
- 全文思维导图------redis设计与实现
- python 迭代器(转)
迭代器 迭代器是在python2.2中被加入的,它为类序列对象提供了一个类序列的接口.有了迭代器可以迭代一个不是序列的对象,因为他表现出了序列的行为.当在python中使用for循环迭代一个对象时,调 ...
- BlockingQueue中 take、offer、put、add的一些比较
(转自:https://blog.csdn.net/wei_ya_wen/article/details/19344939 侵删) 在java多线程操作中, BlockingQueue<E> ...
- 利用虚拟化环境虚拟nvme盘
前情介绍 SPDK SPDK的全称为Storage Performance Development Kit ,是Intel发起的一个开源驱动项目,这个是一个开发套件,可以让应用程序在用户态去访问存储资 ...
- ListView的HeaderView包含的GridView滑动隐藏后无法点击问题分析
目录 1 现象 2 问题分析 2.1 滑动前 2.2 滑动后 2.3 mDataChanged赋值为true的位置 2.3 GridView直接作为ListView的HeaderView为什么可以滑动 ...
- SQL Server 2008-LinkServer操作ORACLE
链接来源:https://www.cnblogs.com/wangyong/p/Oracle.html 最近项目有需求需要通过SQL Server2008中的数据自动更新到ORACLE中,其实,一开始 ...
- 使用进程池模拟多进程爬取url获取数据，使用进程绑定的回调函数去处理数据
1 # 使用requests请求网页,爬取网页的内容 2 3 # 模拟使用进程池模拟多进程爬取网页获取数据,使用进程绑定的回调函数去处理数据 4 5 import requests 6 from mu ...
- Spark3.0.1各种集群模式搭建
对于spark前来围观的小伙伴应该都有所了解,也是现在比较流行的计算框架,基本上是有点规模的公司标配,所以如果有时间也可以补一下短板. 简单来说Spark作为准实时大数据计算引擎,Spark的运行需要 ...
- Cassandra + JSON？答案就是Stargate Documents API
JSON已经被开发者在很多场景中频繁使用,但是其实将Cassandra用于JSON或其他面向文档的用例并不容易. 为了让开发者在使用原生的JSON的同时还能享受Cassandra带来的可靠性和伸缩性, ...