闪烁的灯泡

简介: 闪烁的灯泡

闪烁的灯泡

学习路线:JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡

简介:这是一个用来理解JS定时器函数的,小案例,制造一个可以闪烁的灯泡。

素材:

  • off.gif
  • on.gif

    演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>
<!-- 
添加按钮,给按钮绑定事件 
开灯的按钮
-->
<input type="button" onclick="on()" value="开灯">  
<!-- 添加图片 -->
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<!-- 
添加按钮,给按钮绑定事件 
关灯的按钮
-->
<input type="button" onclick="off()" value="关灯">
<script>
    // 设置开关灯的按钮
    function on(){
        document.getElementById('myImage').src='../imgs/on.gif'; // 通过id获取元素 设置点击事件
    }
    function off(){
        document.getElementById('myImage').src='../imgs/off.gif' // 通过id获取元素 设置点击事件
    }
    //定义一个变量,用来记录灯的状态,偶数是开灯状态,奇数是关灯状态
    var flag = 0;
    // 通过使用循环定时器,来达到让灯泡一闪一闪的,间隔时间为1s
    setInterval(function (){
        if(flag % 2 == 0){//表示是偶数,开灯状态,调用 on() 函数
            on();
        }else {  //表示是奇数,关灯状态,调用 off() 函数
            off();
        }
        flag ++;//改变变量的值        
    },1000);
</script>
</body>
</html>
相关文章
|
Linux
HDFS文件上传异常分析:put: `test.txt': No such file or directory
HDFS文件上传异常分析:put: `test.txt': No such file or directory
10117 0
HDFS文件上传异常分析:put: `test.txt': No such file or directory
|
1月前
|
Shell Linux API
DeepSeek Harness 智能体对接百炼平台:按量 / Coding Plan/Token Plan 多计费方案配置实战指南
DeepSeek Harness通过自定义Provider能力,可以无缝对接百炼平台的四种计费体系,既可以本地PC通过npx快速运行,也可以借助计算巢一键部署到云服务器。接入的关键点:区分四种模式不同的Provider ID、Base URL、API Key类型;不要使用Fetch available models按钮,手动填写模型ID;密钥优先使用环境变量注入,避免明文存放在yaml配置文件。
559 1
|
6月前
|
存储 人工智能 供应链
科技云报到:超千亿智算风口来袭,一文读懂算力产业关键趋势
《智能算力服务研究报告(2026)》发布,首次构建三层服务体系与四大技术底座,推动算力从“租资源”迈向“买任务”,加速全国算力互联互通,助力AI规模化落地。(239字)
522 1
|
6月前
|
人工智能
技术赋能实体,数智驱动增长|抓词智能 长沙 GEO 技术沙龙
5月9日GEO沙龙爆火,专家周有贵现场拆解“精准拓词+合规创作+全域分发+数据闭环”四步法,用延吉面馆、佛山家具等真实案例教你低成本撬动本地流量——不讲虚的,照着做,客户主动找上门!
|
10月前
|
存储 人工智能 弹性计算
玄晶引擎AI数字化转型技术方案:基于阿里云生态的服务业民企降本增效实践
玄晶引擎深度融合阿里云生态,针对服务业民企“轻资产、重运营”痛点,构建以知识库为底座、AI智能力体为核心的云原生数字化转型方案,实现精准获客、智能运营与盈利重构,助力企业降本增效、拓展业务边界。
657 14
|
存储 Linux 网络安全
如何从CentOS7升级到8?CentOS8最新安装教程
从CentOS 7升级到8只需三步:清理系统、更换软件包及存储库、安装新内核与发布版本。首先确保系统最新并清理冗余包,接着替换基础系统包为CentOS 8版本,最后通过DNF工具完成内核更新与系统同步。整个过程需在终端执行,建议升级前备份VPS快照以防数据丢失。此方法可避免重装系统导致的数据清除问题,实现平滑升级。
3566 6
|
监控 Java 测试技术
《服务治理》流量治理:微服务架构的"交通指挥系统"
流量治理是微服务稳定性的核心,涵盖限流、熔断、降级、系统保护与热点防护。通过Sentinel与Spring Cloud Gateway实现精细化控制,结合监控告警、全链路压测与自适应策略,构建高可用的多级防御体系。
|
SQL DataWorks 数据管理
SQL血缘分析实战!数据人必会的3大救命场景
1. 开源工具:Apache Atlas(元数据管理)、Spline(血缘追踪) 2. 企业级方案:阿里DataWorks血缘分析、腾讯云CDW血缘引擎 3. 自研技巧:在ETL脚本中植入版本水印,用注释记录业务逻辑变更 📌 重点总结:
|
项目管理 智能硬件 测试技术
带你读《天猫精灵:如何在互联网公司做硬件》——天猫精灵发展史
带你读《天猫精灵:如何在互联网公司做硬件》——天猫精灵发展史
带你读《天猫精灵:如何在互联网公司做硬件》——天猫精灵发展史