本文介绍如何使用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实现开关灯的内容，建议查阅本站往期文章或继续浏览后续相关文章，感谢大家的支持！