JavaScript实现开关灯效果:两种代码位置方案
作者:交互手记时间:2026-10-24 19:36:07浏览:127
本文介绍如何使用JavaScript实现简单的开关灯效果。通过监听按钮点击事件,利用标志变量切换页面背景颜色。重点解析script标签放置在button元素上方与下方时的代码差异,分别给出对应的完整实现方案,帮助开发者理解DOM加载时机与代码编写位置的关系。
HTML按钮结构
HTML结构部分包含一个用于触发开关灯效果的按钮元素。
<button>开关灯</button>
JavaScript逻辑实现
JavaScript脚本部分负责处理按钮点击逻辑,实现背景颜色的切换功能。
<script>
// window.onload 是窗口加载事件,可以实现将代码写到元素上面
window.addEventListener('load', function () {
var btn = document.querySelector('button');
// 定义一个变量,用来判断灯的开关情况
var flag = 0;
btn.onclick = function () {
if (flag == 0) {
document.body.style.backgroundColor = 'black';
flag = 1;
} else {
document.body.style.backgroundColor = 'pink';
flag = 0;
}
}
})
</script>
脚本位置差异分析
当script脚本代码直接放置在button按钮元素之前时,
按钮前置脚本方案
需要采用以下代码结构来确保功能正常:
<script>
var btn = document.querySelector('button');
var flag = 0;
btn.onclick = function () {
if (flag == 0) {
document.body.style.backgroundColor = 'black';
flag = 1;
} else {
document.body.style.backgroundColor = 'pink';
flag = 0;
}
}
</script>
本文关于利用JavaScript实现简单开关灯效果的教程到此结束。如需了解更多相关JS实现开关灯的内容,建议查阅本站往期文章或继续浏览后续相关文章,感谢大家的支持!
作者最新文章
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载?前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系:Web前端三件套怎么协作
2026-11-04 15:41:40
