JS笔记9、点出满屏小星星、按钮开关转换的多种方法

最新推荐文章于 2022-09-15 15:05:13 发布

欧文Z-phone

最新推荐文章于 2022-09-15 15:05:13 发布

阅读量573

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/Z_phone/article/details/87184017

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

点出满屏小星星

document.creatElement（“标签名”）

document.body.appendChild（对象）

document.body：是body标签对象

document.documentElementhtml：标签对象

注意：margin不会触发事件

        function star(e) {
            //创建一个星星
            var obj=document.createElement("img");
            //添加src属性
            obj.src="star.jpg";
            //大小在20到80随机切换
            var w=Math.floor(Math.random()*80+20);
            obj.width=w;
            //找到鼠标点击时随机坐标位置
            var x=e.clientX;
            var y=e.clientY;
            obj.style.position="absolute";
            obj.style.left=x+"px";
            obj.style.top=y+"px";
            //放到body里面
            document.body.appendChild(obj);
        }

运行结果：

按钮开关转换的多种方法

    <script type="text/javascript">
        function bt1() {
            var obj=document.getElementById("no1");
            if(obj.value=="On"){
                obj.value="Off";
            }else {
                obj.value="On";
            }
        }
        var i=0;
        function bt2(){
            var obj=document.getElementById("no2");
            if(i%2==0){
                obj.value="Off";
            }else {
                obj.value="On";
            }
            i++;
        }
        var flag=true;
        function bt3(){
            var obj=document.getElementById("no3");
            if(flag==true){
                obj.value="Off";
                flag=false;
            }else {
                obj.value="On";
                flag=true;
            }
        }
    </script>
</head>
<body>
<input type="button" id="no1" value="On" onclick="bt1()">
<input type="button" id="no2" value="On" onclick="bt2()">
<input type="button" id="no3" value="On" onclick="bt3()">
</body>

this方法

<script type+"text/javascript>
        function bt4(obj) {   //在此obj直接代指obj=document.getElementById();
            if(obj.value=="On"){
                obj.value="Off";
            }else {
                obj.value="On";
            }
        }
</script>
<body>
<input type="button" id="no4" value="On" onclick="bt4(this)">
</body>

欧文Z-phone

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS笔记9、点出满屏小星星、按钮开关转换的多种方法

点出满屏小星星document.creatElement（“标签名”）document.body.appendChild（对象）document.body：是body标签对象document.documentElementhtml：标签对象注意：margin不会触发事件 function star(e) { //创建一个星星 ...
复制链接

扫一扫