JavaScript程序设计训练 Day8

最新推荐文章于 2024-07-08 16:22:29 发布

晚晚昨晚吃晚饭很晚睡说晚

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量110

点赞数 1

分类专栏： JavaScript 学习打卡文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_55786319/article/details/124966248

版权

学习打卡同时被 2 个专栏收录

71 篇文章 2 订阅

订阅专栏

JavaScript

14 篇文章 0 订阅

订阅专栏

1、使用动态绑定显示问候语

    <script>
        function Child_Wel(){
            alert('小朋友请来儿童休息区喔');
        }
        function Adult_Wel(){
            alert('欢迎来到成人世界！');
        }
    </script>
</head>
<body>
    <p><button id="Child">喔系小朋友</button></p>
    <p><input type="button" value="你好" id="Adult"></p>
    <script>
        var child=document.getElementById('Child');
        child.onclick=Child_Wel; //这个函数这里不能加括号，否则还没点击按钮就直接执行了
        var Adult=document.getElementById('Adult');
        Adult.onclick=Adult_Wel;
    </script>

在这里插入图片描述
还可以用addEventListener(event,function[,useCapture])向按钮添加点击事件,即这样：

    <script>
        var child=document.getElementById('Child').addEventListener('click',Child_Wel);
        var Adult=document.getElementById('Adult').addEventListener('click',Adult_Wel);
    </script>

注意，event是事件名，不能加on，加on是事件属性名。

2、鼠标移入和移出时显示不同的图片

1.静态绑定的方式

    <script>
        function mouse_out(){ //鼠标移开
            document.getElementById('img1').src='img/抓狂.png';
        }
        function mouse_over(){ //鼠标经过
            document.getElementById('img1').src='img/闭嘴.png';
        }
    </script>
</head>
<body>
    <p>
        <img src="img/抓狂.png" id="img1" width="300" alt="" onmouseover="mouse_over()" onmouseout="mouse_out()">
    </p>
</body>

2.动态绑定的方式

    <script>
        function mouse_out(){ //鼠标移开
            document.getElementById('img1').src='img/抓狂.png';
        }
        function mouse_over(){ //鼠标经过
            document.getElementById('img1').src='img/闭嘴.png';
        }
    </script>
</head>
<body>
    <p>
        <img src="img/抓狂.png" id="img1" width="300" alt="">
    </p>
    <script>
        var out=document.getElementById('img1');
        out.onmouseout=mouse_out;
        var over=document.getElementById('img1').addEventListener('mouseover',mouse_over);     
    </script>

晚晚昨晚吃晚饭很晚睡说晚

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript程序设计训练 Day8

1、使用动态绑定显示问候语 <script> function Child_Wel(){ alert('小朋友请来儿童休息区喔'); } function Adult_Wel(){ alert('欢迎来到成人世界！'); } </script></head><body> <p><button id="Ch
复制链接

扫一扫