js

最新推荐文章于 2024-02-19 17:51:27 发布

扎刺

最新推荐文章于 2024-02-19 17:51:27 发布

阅读量92

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_45323349/article/details/116447739

版权

html 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<html>
    <head> 
        <title>点击按钮使其自动移动</title>
        <script>
            var interval
            function chenge()
            {
                
                var a1 = document.getElementById("egg")
                var i = 0
                /*该函数有两个变量，第一个是一个需要执行的函数，第二个是间隔多少秒执行这个函数 以毫秒为单位*/
               interval = setInterval(function() {
                   a1.style.marginLeft=i/*利用获取过来的元素，直接调用style，然后调用其中包含的属性，就可直接改变*/
                    
                   if(i<300)/*设置界限*/
                  {
                      i=i+3
                      console.log(i);
                      
                  }
                  else{
                      //表示停止
                      clearInterval(interval)
                  }
                   
                   
               }, 50);
                
            }
            function x(){
                var ass = document.getElementsByClassName("nba")
                     var i = 0
                    for(i=0;i<ass.length;i++)
                    {
                        ass[i].innerText = "123"
                    }
            }
            function end(){
                clearInterval(interval)
            }
        </script>
           
    </head>
    <body> 
        <div id="egg" style="background-color: blue; width: 400px; height: 400px;"></div>
        
        <input type="button" value="开始" onclick="chenge(),x()"/>
        <input type="button" value="结束" onclick="end()"/>
        
        <p class="nba"></p>
        <p class="nba">你好</p>
        <p class="nba">你好</p>
        <p class="nba">你好</p>
        <p class="nba">你好</p>
        <p class="nba" >你好</p>
        
     

       
        </div>
    </body>
</html>

<html>
    <head>
        <title>弹出窗口，以及基本的点击按钮改变</title>
        <Script src="script.js"> </Script>
    </head>
    <body>
        <!--onclick 显示点击之后的状态 -->
        <input type="button" value="确定" onclick="alert('Hello World!')"/>

        <p id = a1> 撒大大大叔</p>
        <input type="button" value="修改" onclick="change()"/>
        <!--点灯-->
        <img src="0.gif" id="a2"οnclick="change1()">
       
        <!---->
        <input type="button" value="熄灭" onclick="change2()">

    </body>
</html>

<html>

<head>
    <title>huoqu</title>
    <style type="text/css">
        .div1 {
            width: 300;
            height: 300;
            background-color: rgb(24, 214, 88);
            /*设置圆角*/
            border-radius: 30%;
            position: absolute;
        }
    </style>
    <script>
        var oldc_x;
        var old_off_x;
        var oldc_y;
        var old_off_y;
        var flag = false
        // var x = document.getElementById("a1")
        //点击鼠标时
        function down() {
            var x = document.getElementById("a1")
            //点击鼠标时获取此时鼠标所在位置利用《window event clientx》
            //offsetLeft 获取的是div的左边界距离网页左边的距离，Top同理
            flag = true
            x.style.backgroundColor = "red"

            oldc_x = window.event.clientX;
            oldc_y = window.event.clientY;
            old_off_x = x.offsetLeft;
            old_off_y = x.offsetTop;
            //在控制台输出输出
            console.log("falg:" + flag)
        }
        //鼠标移动时
        function move() {
            var x = document.getElementById("a1")
            //只有当鼠标选中时才可以进行移动操作
            if (flag) {

                x.style.backgroundColor = "black"

                //获取此时鼠标的新位置
                var newc_x = window.event.clientX;
                //在原来的基础上加上鼠标移动的距离，也就是差值，就可以完成移动
                x.style.marginLeft = old_off_x + newc_x - oldc_x + "px";
                // x.style.left = new_off_x + "px";

                //同上
                var newc_y = window.event.clientY;
                x.style.marginTop = old_off_y + newc_y - oldc_y + "px";
                // x.style.top = new_off_y + "px";
                console.log("Top:" + x.style.marginTop)
                console.log("Left:" + x.style.marginLeft)
            }

        }
        //松开鼠标时
        function up() {
            var x = document.getElementById("a1")
            //松开时重置，再次点击才进行移动操作
            flag = false

            x.style.backgroundColor = "blue"
            console.log("!!!falg:" + flag)
        }
        document.onkeydown = function(event){
            var box = document.getElementById("a1")
            var e = event || window.event ||arguments.callee.caller.arguments[0];

            if(e&&e.keyCode == 38){//上
                box.style.top = box.offsetTop - 2;

            }
            else if(e&&e.keyCode == 37){ //左
                box.style.left = box.offsetLeft - 2;
                
            }
            else if(e&&e.keyCode == 40){ //下
                box.style.top = box.offsetTop + 2;
                
            }
            else if(e&&e.keyCode == 39){ //右
                box.style.left = box.offsetLeft + 2;
                
            }
        }


    </script>


</head>

<body onmousemove="move()">
    <div id="a1" class="div1" onmousedown="down()" onmouseup="up()">

    </div>

</body>

</html>

扎刺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js

<html> <head> <title>点击按钮使其自动移动</title> <script> var interval function chenge() { var a1 = document.getElementById("egg")
复制链接

扫一扫