咕嘿嘿poi 2023-04-16 08:55 采纳率: 52%
浏览 36
已结题

querySelector与getElementById怎么决解?

querySelector与getElementById怎么决解?
下面的是两个JS,麻烦给改改 谢谢。


<div class="top-img-1">
  <div class=" top-img-sj-1"><p>打乱DIV1</p></div>
  <div class=" top-img-sj-1"><p>打乱DIV2</p></div>
  <div class=" top-img-sj-1"><p>打乱DIV3</p></div>
</div>
<!-- 引入内部JS -->
<script type="text/javascript">
// 将背景随机
window.onload=function(){
 randomFun1();
}

//    轮播背景顺序打乱
function randomFun1(){
        var container = document.querySelector('.top-img-1');
        var itemArr = container.querySelectorAll('.top-img-sj-1');
        var random = function(){return Math.random()>0.5 ? -1 : 1};
        var itemArrShuffled = Array.from(itemArr).sort(random);
        itemArrShuffled.forEach(function(item){
                container.appendChild(item);
                });
}
</script>


<div class="hhzp">
  <div id="div1">
    <a href="#" >A标签1</a>
    <a href="#" >A标签2</a>
    <a href="#" >A标签3</a>
  </div>
</div>
<!-- 下面的JS本来是外部文件,为了方便这里就写在内部了 -->
<script>
    window.onload = function() {
    var oDiv = document.getElementById('div1');
    var aA = oDiv.getElementsByTagName('a');
    var i = 0;
    for (i = 0; i < aA.length; i++) {
        aA[i].pause = 1;
        aA[i].time = null;
        initialize(aA[i]);
        aA[i].onmouseover = function() {
            this.pause = 0;
        };
        aA[i].onmouseout = function() {
            this.pause = 1;
        };
    }
    setInterval(starmove, 80);   /* 控制漂浮速度*/

    function starmove() {
        for (i = 0; i < aA.length; i++) {
            if (aA[i].pause) {
                domove(aA[i]);
            }
        }
    }

    function domove(obj) {
        if (obj.offsetTop <= -obj.offsetHeight) {
            obj.style.top = oDiv.offsetHeight + "px";
            initialize(obj);
        } else {
            obj.style.top = obj.offsetTop - obj.ispeed + "px";
        }
    }

    function initialize(obj) {
        var iLeft = parseInt(Math.random() * oDiv.offsetWidth);
        var scale = Math.random() * 1 + 1;
        var iTimer = parseInt(Math.random() * 1500);
        obj.pause = 0;

        obj.style.fontSize = 12 * scale + 'px';

        if ((iLeft - obj.offsetWidth) > 0) {
            obj.style.left = iLeft - obj.offsetWidth + "px";
        } else {
            obj.style.left = iLeft + "px";
        }
        clearTimeout(obj.time);
        obj.time = setTimeout(function() {
            obj.pause = 1;
        }, iTimer);
        obj.ispeed = Math.ceil(Math.random() * 4) + 1;
    }
};
</script>

展开全部

  • 写回答

2条回答 默认 最新

  • 乘风xs 2023-04-16 09:04
    关注

    代码看起来没啥问题呀,详细描述下什么效果出不来。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    咕嘿嘿poi 2023-04-16 09:41

    这两个都是打乱div顺序的,冲突就是二选一,选第一个的话第二个就没有打乱反之亦然

    回复
    乘风xs 回复 咕嘿嘿poi 2023-04-16 13:33

    原因是你两个地方都是在给window.onload进行赋值,所以你在任意时候只有一个响应。需要改用addEventListener

     
    <div class="top-img-1">
      <div class=" top-img-sj-1"><p>打乱DIV1</p></div>
      <div class=" top-img-sj-1"><p>打乱DIV2</p></div>
      <div class=" top-img-sj-1"><p>打乱DIV3</p></div>
    </div>
    <!-- 引入内部JS -->
    <script type="text/javascript">
    // 将背景随机
    window.addEventListener('load', randomFun1);
    //    轮播背景顺序打乱
    function randomFun1(){
            var container = document.querySelector('.top-img-1');
            var itemArr = container.querySelectorAll('.top-img-sj-1');
            var random = function(){return Math.random()>0.5 ? -1 : 1};
            var itemArrShuffled = Array.from(itemArr).sort(random);
            itemArrShuffled.forEach(function(item){
                    container.appendChild(item);
                    });
    }
    </script>
     
     
    <div class="hhzp">
      <div id="div1">
        <a href="#" >A标签1</a>
        <a href="#" >A标签2</a>
        <a href="#" >A标签3</a>
      </div>
    </div>
    <!-- 下面的JS本来是外部文件,为了方便这里就写在内部了 -->
    <script>
        window.addEventListener( 'load', () => {
        var oDiv = document.getElementById('div1');
        var aA = oDiv.getElementsByTagName('a');
        var i = 0;
        for (i = 0; i < aA.length; i++) {
            aA[i].pause = 1;
            aA[i].time = null;
            initialize(aA[i]);
            aA[i].onmouseover = function() {
                this.pause = 0;
            };
            aA[i].onmouseout = function() {
                this.pause = 1;
            };
        });
        setInterval(starmove, 80);   /* 控制漂浮速度*/
     
        function starmove() {
            for (i = 0; i < aA.length; i++) {
                if (aA[i].pause) {
                    domove(aA[i]);
                }
            }
        }
     
        function domove(obj) {
            if (obj.offsetTop <= -obj.offsetHeight) {
                obj.style.top = oDiv.offsetHeight + "px";
                initialize(obj);
            } else {
                obj.style.top = obj.offsetTop - obj.ispeed + "px";
            }
        }
     
        function initialize(obj) {
            var iLeft = parseInt(Math.random() * oDiv.offsetWidth);
            var scale = Math.random() * 1 + 1;
            var iTimer = parseInt(Math.random() * 1500);
            obj.pause = 0;
     
            obj.style.fontSize = 12 * scale + 'px';
     
            if ((iLeft - obj.offsetWidth) > 0) {
                obj.style.left = iLeft - obj.offsetWidth + "px";
            } else {
                obj.style.left = iLeft + "px";
            }
            clearTimeout(obj.time);
            obj.time = setTimeout(function() {
                obj.pause = 1;
            }, iTimer);
            obj.ispeed = Math.ceil(Math.random() * 4) + 1;
        }
    };
    </script>
    
    

    回复
    乘风xs 回复 咕嘿嘿poi 2023-04-16 14:39

    望采纳

    回复
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 4月24日
  • 已采纳回答 4月17日
  • 修改了问题 4月16日
  • 创建了问题 4月16日

悬赏问题

  • ¥15 没输出运行不了什么问题
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目
  • ¥30 海外项目,如何降低Google Map接口费用?
  • ¥15 fluentmeshing
  • ¥15 手机/平板的浏览器里如何实现类似荧光笔的效果
  • ¥15 盘古气象大模型调用(python)
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部