点不到的按钮_onmousemove 怎么改成touch-CSDN博客

本文链接：https://blog.csdn.net/m0_55826123/article/details/127884873

按钮+句子

电脑打开效果好点
如果要用移动端打开，可以在头部修改viewport，如下：

 <meta name="viewport"
  content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

再把onmousemove修改为ontouchstart

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
<style>
    #div1 {
        height: 300px;
        position: relative;
        background-image: url(https://img-blog.csdnimg.cn/b3088e674b49428b81b1e709d5623649.png#pic_center);
        /* background-repeat: repeat; */
        background-size: 100% 100%;
    }
    
    #div2 {
        position: relative;
        left: 50%;
    }
</style>

<script>
    function fun1() {
        var x = Math.random();
        var y = Math.random();
        var div = document.getElementById("div2");
        div.style.left = (x * 100) + "%";
        div.style.top = (y * 100) + "%";
    }
    var str = "前路浩浩荡荡，万物皆可期待";
    var len = str.length;
    var i = 1;

    function showword() {
        document.getElementById("show").innerHTML = str.substr(0, i++) + '_';;
        if (i > len) {
            clearInterval("done");
        }
    }
    var done = setInterval("showword()", 500);
</script>

<body>

    <div id="div1">
        <div id="show"></div>
        emo了吗<br>
        <div id="div2"><input type="button" value="emo了" onmousemove="fun1()"></div>
    </div>
</body>

</html>