这是我参与「第五届青训营 」伴学笔记创作活动的第5天
今日以页面模式切换案例进一步了解JS,以逻辑更为清晰，代码更加简洁的方式实现简单的交互行为。 从实践维度解读在实际编码中采用好的JavaScript代码实现交互，总结语言编码的原则，HTML、CSS、JS各司其职。
例子
用JS代码或者CSS控制网页全局风格，支持白天和夜间两种模式，下面是HTML的基本结构，由
<div class="top">
<h1 id="app">深夜食堂</h1>
<button id="btn">
<!-- <svg t="1673946334489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2979" width="50" height="50"><path d="M85.333333 512c0 235.648 191.018667 426.666667 426.666667 426.666667 207.872 0 381.013333-148.650667 418.944-345.450667-19.925333 2.730667-40.149333 4.117333-60.544 4.117333C625.322667 597.333333 426.666667 398.677333 426.666667 153.6c0-20.394667 1.386667-40.618667 4.117333-60.544C233.984 130.965333 85.333333 304.128 85.333333 512zM512 0c11.413333 0 22.741333 0.512 34.005333 1.237333A356.949333 356.949333 0 0 0 512 153.6C512 351.530667 672.469333 512 870.4 512a357.12 357.12 0 0 0 152.362667-34.005333c0.725333 11.264 1.237333 22.592 1.237333 34.005333 0 282.773333-229.226667 512-512 512S0 794.773333 0 512 229.226667 0 512 0z m426.666667 170.666667a85.333333 85.333333 0 1 1 0-170.666667 85.333333 85.333333 0 0 1 0 170.666667z" fill="#9099B0" p-id="2980"></path></svg>
</button> -->
</div>
<main>
<div class="content">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.aAf-5DHKy4oMh0ILQ89GyAHaFj?w=269&h=202&c=7&r=0&o=5&dpr=1.3&pid=1.7" style="width:200px;" class="img" alt="加载失败"/>
</div>
<br/>
<div class="p">
<p>这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返</p>
</div>
</main>
方法一：使用JS实现模式切换
#modeCheckBox:checked+.content{
blackground-color:black;
color:white;
transition:all ls;
}
方法二：CSS实现模式切换
const btn=document.getElementById('btn');
btn.addEventListener('click', (e) =>{
const body=document.body;
if(body.className !== 'night'){
body.className='night';
}else{
body.className='';
}
});
实现的结果图
通过该案例可得到结论：
- HTML/CSS/JS各司其职，分别承担着网页基础结构、页面层叠样式、交互等角色；在实现页面时，有的时候可以使用CSS样式进行交互，减轻代码的复杂性，使JS代码解决更为复杂的交互；
- 应该避免不必要的JS直接操作样式，在实现交互的过程中可以使用CSS解决的事件不使用JS实现，例如鼠标的点击、悬浮等效果可以直接采用CSS实现
- 纯展示类交互寻求零JS方案。在深夜食堂这以例子下，通过CSS足以实现白天夜间模式的切换，所以将采用CSS实现
