Javascript简单实现网页中的小开关

网页中的小开关

<!DOCTYPE html>
<html>
<head>
	<title>开关</title>
	<script>
        window.onload=function(){
            var oBtn = document.querySelectorAll('button')[0];
            var change = 1;
            oBtn.onclick=function(){
                if(change){
                    oBtn.style.color="green";
                    this.innerHTML='ON';
                    change--;
                }
                else {
                    oBtn.style.color="red";
                    this.innerHTML='OFF';
                    change++;
                }
            }
        }
	</script>
</head>
<body>
	<button style="color:red">OFF</button>
</body>
</html>

上面的代码中,用了一个变量"change"来储存开关的状态,通过"change"的变化来关联其他内容的变化。

发布了13 篇原创文章 · 获赞 2 · 访问量 5379

猜你喜欢

转载自blog.csdn.net/weixin_44212397/article/details/103855269