JavaScript——常用功能的实现
各种功能实现的思路及代码
一、昼夜主题切换功能
在没有后台服务器，前端只有静态页面时，用js就可以实现昼夜主题切换。不过缺点是默认主题不能随时间变化，且每刷新一次页面都会恢复为默认样式。
如果有后端，则应该根据客户端请求网页的不同时间来动态创建不同主题的前端页面！
思路一：更改css文件
提前写好两个配色主题（css文件），利用点击按钮绑定js函数去更改头部<link>标签的<href>属性——更改引入的css文件的路径——来实现该想法。
代码实现：
1.body中添加点击按钮，获取元素并绑定点击事件，并新建一个标记昼夜白天切换的变量
tips！
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
window.onload = function(){
var btn01 = document.getElementById("btn-01");
//添加变量以标记昼夜白天，此处建议与css文件名一致，以方便将此值直接应用到文件名处！
var tips = "day";
btn01.onclick = function(){
}
}
</script>
...
<body>
...
<img src="./img/moon01.png" id="btn-01" />
...
</body>2.点击事件的实现（重点！）
（1）获取头部
<link>元素注：经测试，
<link>标签无法通过id获取，可使用TagName获取！
2
// 此时获取到的是所有link标签的集合，如果有多个link标签应再确认是哪一个，只有一个的话那就是“linkList[0]”（2）修改
<link>标签的href属性
2
3
4
5
6
7
tips = "night";
linkList[0].href = "./css/" + tips + ".css";
}else{
tips = "day";
linkList[0].href = "./css/" + tips + ".css";
}3.总结
2
3
4
5
6
7
<script src="./js/dayNightSwitch.js" type="text/javascript" charset="utf-8"> </script>
...
<div id="dayNightDiv">
<img src="https://www.z4a.net/images/2023/01/14/day_and_night.png" id="dayNightBtn" />
</div>
...
2
3
4
5
6
7
8
9
10
11
12
13
14
var btn01 = document.getElementById("dayNightBtn");
var tips = "day";
var linkList = document.getElementsByTagName("link");
btn01.onclick = function(){
if(tips == "day"){
tips = "night";
linkList[0].href = "./css/新拟态" + tips + ".css";
}else{
tips = "day";
linkList[0].href = "./css/新拟态" + tips + ".css";
}
}
}该方法修改较为方便，操作简单，最重要的是代码耦合度低！
思路二：即时更改页面配色
默认使用配色1，将配色2写在js里，点击按钮运行该脚本，再点击恢复原来配色
总结：这种方法代码少，但是可读性不强，较难修改和维护，代码耦合度高，在页面简单内容较少时更易操作，但是页面内容一旦多起来就显得捉襟见肘，因此不是很推荐！
