HTML_习题_按钮事件绑定

最新推荐文章于 2023-06-28 15:27:12 发布

微__凉

最新推荐文章于 2023-06-28 15:27:12 发布

阅读量570

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/Qian280101/article/details/121944192

版权

用两个按钮调整页面中红色正方形的颜色和形状

要求：
按一下“变色”按钮，若原本正方形为红色，则变为绿色；若原本正方形为绿色，则变为红色。

按一下“变形”按钮，若原本为正方形则变为圆形；若原本为圆形，则变为正方形。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button class="bs">变色</button>
    <button class="bx">变形</button>
    <p></p>
    <div class="c"></div>
    <script>
        let bs=document.querySelector(".bs");
        let bx=document.querySelector(".bx");
        let div=document.querySelector(".c");
        let a=0;
        let b=0;
        let c=document.createElement("div");
            c.style.height="50px";
            c.style.width="50px";
            c.style.backgroundColor="red";
            div.appendChild(c);
            // 变色
        bs.addEventListener("click",function(){
            if(a%2==0){
                c.style.backgroundColor="green";  
            }
            else {
                c.style.backgroundColor="red";
            }
            a++;
        })
        bx.addEventListener("click",function(){
            if(b%2==0){
                c.style.borderRadius="50%";
            }
            else{
                c.style.borderRadius="0%";
            }
            b++;  
        })
    </script>
</body>
</html>

微__凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML_习题_按钮事件绑定

用两个按钮调整页面中红色正方形的颜色和形状要求：按一下“变色”按钮，若原本正方形为红色，则变为绿色；若原本正方形为绿色，则变为红色。按一下“变形”按钮，若原本为正方形则变为圆形；若原本为圆形，则变为正方形。<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <button
复制链接

扫一扫