利用js实现简单开关灯代码

body部分：

<button>开关灯</button>

script部分：

    <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>

到此这篇关于 利用js实现简单开关灯代码的文章就介绍到这了,更多相关 js实现简单开关灯内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS/jQuery实现简单的开关灯效果【案例】

    JS/jQuery实现简单的开关灯效果【案例】

    本文实例讲述了JS/jQuery实现简单的开关灯效果.分享给大家供大家参考,具体如下: 实现效果: html结构只有两个button标签 <button id="left">开灯</button> <button id="right">关灯</button> 方法一:用原生js来做 <script> //1.获取页面元素 var left=document.getElementById('left'); v

  • js实现开关灯效果

    js实现开关灯效果

    本文实例为大家分享了js实现开关灯效果的具体代码,供大家参考,具体内容如下 开关灯 <style> body{background: black;cursor: pointer;} .lamp{width: 100px;height: 100px;border-radius: 50%;background: #ccc;} .pole{width: 10px;height: 400px;background: brown;margin-left: 45px;} .toggle{width: 80

  • JavaScript实现的开关灯泡点击切换特效示例

    本文实例讲述了JavaScript实现的开关灯泡点击切换特效.分享给大家供大家参考,具体如下: 准备 首先要准备两张图片,一张是灯泡亮的图片,取名为on.jpg,另一张是灭的图片,取名为off.jpg,都放置到当前的目录下. 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont

  • 利用js实现简单开关灯代码

    body部分: <button>开关灯</button> script部分: <script> // window.onload 是窗口加载事件,可以实现将代码写到元素上面 window.addEventListener('load', function () { var btn = document.querySelector('button'); // 定义一个变量,用来判断灯的开关情况 var flag = 0; btn.onclick = function ()

  • 利用JS实现简单的瀑布流加载图片效果

    利用JS实现简单的瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 原理是: 1.设定一行中的列数: 2.取第一行中每一个div的高度并把每一个高度放进一个数组中: 3.算出数组中最小高度的index值: 4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值: 5.以此类推实现多栏布局的瀑布流效果: 6.如果最后一

  • 利用JS延迟加载百度分享代码,提高网页速度

    发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --><div id=&quo

  • js倒计时简单实现代码

    倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 html <div id="clock"> <span id="days"></span>天 <span id="hours"></span>时 <span id="minutes"></

  • aspx中利用js实现确认删除代码

    1:定义删除按钮 <asp:Button ID="btnDelete" runat="server" Text="删除" OnClientClick="javascript: return ShowMessage()" OnClick="btnDelete_OnClick" CommandArgument='<%# Eval("Id") %>' /> 2:添加对应

  • 利用JS实现简单的日期选择插件

    利用JS实现简单的日期选择插件

    首先是调用方法如下 //调用方法,后面回调函数返回的是当前选择的日期 calender('#calend').init(function(date){ this.innerHTML = date }); //具体参数说明 //如果需要传入参数,第一个为json,第二个为回调函数 //下面是format格式化显示格式类型,有如下几种: //yyyy为年数 //大写M为月数 //d为几号 //h为小时 //小写m为分钟 //s为秒数 //q为季度 //小写e,为数字星期格式 //大写E,为中文星期格

  • 简单的JS轮播图代码

    简单的JS轮播图代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

  • 利用css+原生js制作简单的钟表

    利用css+原生js制作简单的钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'

  • 利用js实现前后台传送Json的示例代码

    无论使用什么框架都存在着从controller向Html页面或者jsp页面传递数据的问题,最常用的方式是传递Json字符串.以前对这块知识有些模糊,现在整理一下. [Jquery基本方法] 实现传值常用的是Jquery以及内部封装的ajax.首先看一下jquery的get()和post()语法.get()方法是从服务器获得数据,其主要参数就是获得后台请求地址,以及负责处理的回调函数: $.get(URL,callback); $("button").click(function(){

  • Node.js 利用cheerio制作简单的网页爬虫示例

    本文介绍了Node.js 利用cheerio制作简单的网页爬虫示例,分享给大家,具有如下: 1. 目标 完成对网站的标题信息获取 将获取到的信息输出在一个新文件 工具: cheerio,使用npm下载npm install cheerio cheerio的API使用方法和jQuery的使用方法基本一致 如果熟练使用jQuery,那么cheerio将会很快上手 2. 代码部分 介绍: 获取segment fault页面的列表标题,将获取到的标题列表编号,最终输出到pageTitle.txt文件里

随机推荐