网页点击切换背景颜色，如何实现
2023-08-01 本文已影响0人
by依白
之前偶然看到某小说网有个护眼功能，那时刚开始接触js的我好奇是怎么做的，后面通过翻阅资料，自己整出了个简单的
未点击效果
点击后效果
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style>
.h1{text-align:center;}
.book{padding:10px;line-height:150%;color:#888;}.book_about dl dd .showall{color:#3487DD;}
.header{background:#8ED3D3;line-height:*px;display:block;position:relative;font-size:16px;}
.va{fonfont-size:20px;}
.a{
text-align=center;
</style>
</head>
<body>
<h1>龙族</h1>
<div>
<h2><span>书籍</span></h2>
<div class="book">
<div><img src="http://img.c0m.io/quanben5.com/upload/book_images/91/90073.jpg" alt="龙族" /></div>
<h3><span>龙族</span></h3>
<p >作者: <span/>江南</span></p>
<p>类别: <span>玄幻</span></p>
<p >状态: <span>完结</span></p>
</div>
<hr>
<p class="header" >简介：《龙族》是作家江南创作的系列长篇魔幻小说，由《龙族Ⅰ火之晨曦》、《龙族Ⅱ悼亡者之瞳》、《龙族Ⅲ黑月之潮》、《龙族Ⅳ奥丁之渊》组成，2009年10月1日开始在小说绘上连载，第一部于2010年04月首次出版。累计销售量达千万册的青春幻想小说，被誉为“东方的《哈利·波特》”，作者江南本人获得2013年中国作家富豪榜榜首的荣誉。主角路明非原本只是一个普通的高中生，在申请留学的时候收到了来自屠龙学院——卡塞尔学院的来信，从此开启了他不平凡的人生，在伙伴陈墨瞳、楚子航、恺撒等人的帮助下，属于龙族的神秘世界逐渐在他们面前</p>
</div>
<hr>
<div >
<script></script><div id="chaptercontent" class="Readarea ReadAjax_content">
<p class="va">第2章 序幕：白帝城                             <button>护眼</button></p>
<br /><script>mchaptererror();</script><br />“哥哥……”有人在黑暗里轻声地呼喊。
<br />
<br /> 真烦！谁家的小孩跑丢了？
<br />
<br /> “哥哥。”孩子又喊。
<br />
<br /> 真烦真烦真烦！哥哥？这里没有！
<br />
<br /> “哥哥……那我走啦……”孩子低声说，声音渐渐远去。
<br />
<br /> 他心里忽然有点不忍心，那个渐渐远去的声音，透着一股孤单，让人想到那个孩子远去的背影，像只被抛弃的小猎犬。
<br />
<br /> “好啦好啦好啦！你家住哪街哪号哪门？你那个靠不住的哥哥叫什么名字？我送你回家！”他翻身坐了起来。
<br />
<br /> 他在阳光中席地而坐，一袭白衣皎洁如月，所见的是一朵白色的茶花在粗瓷瓶中盛放，隔着那支花，白衣的孩子手持一管墨笔伏案书写，一笔一画。
<br />
<br /> “喂，你没走啊？你耍我的吧？”他想说，却没有说。
<br />
<br /> 他很自然地做了一件事，桌上有盘青翠欲滴的葡萄，他从里面摘下一小串，隔着桌子递给那个孩子。
<br />
<br /> 孩子抬起头来，眼睛里闪动着惊慌，像是警觉的幼兽，“哥哥，外面有很多人。”
<br />
<br /> 鬼扯吧？这么安静的。他想。
<br />
<br /> 可是自然而然地，他说了另一句话，“也许会死吧？但是，康斯坦丁，不要害怕。”
<br />
<br /> “不害怕，和哥哥在一起，不害怕……可为什么……不吃掉我呢？吃掉我，什么样的牢笼哥哥都能冲破。”孩子认真地说。
<br />
<br /> 吃掉……你？虽然你长得很白嫩，但是绝不代表你比汉堡好吃啊，我中午才吃了一个汉堡，一点不饿。他想。
<br />
<br /> “你是很好的食物，可那样就太孤单了，几千年里，只有你和我在一起。”再一次，他说出了言不由衷的话。
<br />
<br /> “可是死真的让人很难过，像是被封在一个黑盒子里，永远永远，漆黑漆黑……像是在黑夜里摸索，可伸出的手，永远触不到东西……”
<br />
<br /> “所谓弃族的命运，就是要穿越荒原，再次竖起战旗，返回故乡。死不可怕，只是一场长眠。在我可以吞噬这个世界之前，与其孤独跋涉，不如安然沉睡。我们仍会醒来。”真不敢相信，这么拉风的台词，居然会出于他的嘴里。
<br />
<br /> “哥哥……竖起战旗，吞噬世界的时候，你会吃掉我么？”孩子看着他，澄澈的瞳子里闪动着……期待。
<br />
<br /> 见鬼！这是什么“我们是相亲相爱的食人族一家”的话剧桥段么？可你们的家庭伦理真的好奇怪！
<br />
<br /> “会的，那样你就将和我一起，君临世界！”可他轻轻地点头，声音里透着冷硬的威严。
<br />
<br /> 孩子从水壶里倒了一杯水，递给了他，他茫然地喝了下去。
<br />
<br /> “我要走了，哥哥，再见。”孩子站了起来。
<br />
<br /> 他想说我不是你哥哥你认错人了，但他也只是随口说，“再见，自己小心，人类，是不能相信。”
<br />
<br /> 又是句奇怪的台词，没头没脑的。
<br />
<br /> 孩子出门去了，在背后带上了门。他听着孩子的脚步声越来越远，最后完全消失了。
<br />
<br /> 他忽然有点害怕，他想自己真是昏头了，那么小的一个孩子，放他自己去街上走，给人拐跑了怎么办？不知道他得走多远的路才能找到哥哥。他变得坐立不安，终于忍不住的时候，他起身往门口跑去。
<br />
<br /> 他推开了门，炽烈的光照在他的白衣上，不是阳光，而是火光。燎天的烈焰中，城市在哭号，焦黑的人形在火中奔跑，成千上万的箭从天空里坠落，巨大的牌匾燃烧着、翻转着坠落，上面是“白帝”两个字，简直是地狱。
<br />
<br /> 城市的正中央，立着一根高杆，孩子被挂在高杆顶上，闭着眼睛，整个城市的火焰，都在灼烧他。
<br />
<br /> 像是一场盛大的献祭。
<br />
<br /> 心里真痛啊，真像是有把刀在割。什么重要的人就此失去了，因为他犯了错误。
<br />
<br /> 他忽然想起一件事来，确实没错，他就是个孩子的哥哥。
<br />
<br /> “康斯……坦丁。”他喊出了那个名字。
<br />
<br /> 他猛地坐起，在下午的阳光中睁开眼睛，呼吸急促，全身都是冷汗，外面是高架轻轨经过的噪音。
<br />
<br /> 他忽然觉得这声音那么悦耳，提醒他梦中的一切都是假的，他所在的，只是普普通通的人世。<br />
<div>
<a href="">小说网</a>
</div>
</body>
<script>
var btn = document.querySelector('button');
var flag = 0;
btn.onclick = function() {
if(flag == 0){
document.body.style.backgroundColor = '#EED9BF';//点击后背景颜色
flag = 1;
}else {
document.body.style.backgroundColor = 'white';
flag = 0;
}
}
</script>
<html>
重点部分为js部分
var btn = document.querySelector('button');
var flag = 0;
btn.onclick = function() {
if(flag == 0){
document.body.style.backgroundColor = '#EED9BF';//点击后背景颜色
flag = 1;
}else {
document.body.style.backgroundColor = 'white';
flag = 0;
}
}
