Javascript知识【定时器知识&src属性】

💂 个人主页: 爱吃豆的土豆
🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

🏆人必有所执，方能有所成！

🐋希望大家多多支持😘一起进步呀！

1：JS知识讲解【阶段重点】

1.1：onload事件

1.2：定时器知识

1.2.1：循环定时器

1.2.2：一次性定时器

1.3：src属性

1：JS知识讲解【阶段重点】

1.1：onload事件

这个事件会在网页加载完毕或者是图片加载完毕之后触发（从上到下加载）

方式一：直接绑定方式

方式二：DOM绑定方式

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        function run() {
            var username = document.getElementById("username");
            alert(username.value);
        }
        //页面加载完成时:执行多函数
        window.onload = function () {
            run();
        };
        //若页面加载完成时，只会执行一个函数（该函数需要没有参数列表）
        /*window.onload = run;*/
    script>
head>

<body>

    <input type="text" id="username" value="王金雪"/>
body>
html>

小结：

保证页面元素先加载，然后再JS执行
若没有效果出现，很可能是出错了，所以打开f12 console控制台查看错误

1.2：定时器知识

1.2.1：循环定时器

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        function run() {
            alert("你好");
        }

        //设置3秒重复定时器
        //setInterval(run,3000);
        //代码仅使用一次
        /*setInterval(function () {
            run();
        },3000);*/
        //常见方式
        setInterval("run()",3000);

    script>
head>
<body>

body>
html>

取消循环定时器：

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        function run() {
            alert("你好");
        }
        var xid = setInterval("run()",3000);

        function stopIntervalRun() {
            clearInterval(xid);
        }
    script>
head>
<body>

    <input type="button" value="点我取消定时器" onclick="stopIntervalRun()"/>

body>
html>

1.2.2：一次性定时器

var 定时器id = setTimeout(code,mic);

clearTimeout(定时器id);

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        var x1;
        function run() {
            alert("你好");
        }
        function start1() {
            x1 = setTimeout("run()",3000);
        }
        function stop1() {
            clearTimeout(x1);
        }

    script>
head>
<body>
    <input type="button" value="开启定时器" onclick="start1()"/><br/>
    <input type="button" value="取消定时器" onclick="stop1()"/>
body>
html>

小结：

循环定时器：重复执行的任务

一次性定时器：仅需要执行一次即销毁的任务

1.3：src属性

修改其src属性即可

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        function run2() {
            document.getElementById("img1").src="img/2.png";
        }
        function run3() {
            document.getElementById("img1").src="img/3.png";
        }
    script>
head>
<body>
    <img id="img1" src="img/1.png" width="100"/>
    <br/>
    <input type="button" value="图片2" onclick="run2()">
    <input type="button" value="图片3" onclick="run3()">
body>
html>

相关阅读:
快手指纹之十八罗汉
 word简历排版技巧
 Docker+Jmeter+InfluxDB+Grafana 搭建性能监控平台
 UnrealEngine iOS 打包 —— 签名证书（cer、p12）生成
 数字图像处理（入门篇）二颜色空间
 区块链的概念和特征
 如何快速识别图片中的文字？建议使用者两种方法
 linux 安装python django pip 遇到的问题
 maven基础入门
 LayaBox---多状态---时间轴动画
原文地址：https://blog.csdn.net/m0_64550837/article/details/126185736