个人中心
gpt4 book ai didi

javascript - 同一页面上的 jQuery 和 javascript 代码不起作用

转载 作者：数据小太阳 更新时间：2023-10-29 05:36:35 24 4
gpt4 key购买 nike

我对 jQuery 和 javascript 代码有疑问；当我在 </head> 之间写下这个 jQuery 时和 <body> 

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j('#page_effect').fadeIn(3000);
    });
</script>

然后在body标签中写javascript代码

<script src="bubbles.js"></script>
<script type="text/javascript">
    bubblesMain(new Object({
        type : 'linear',
        minSpeed : 100,
        maxSpeed : 400,
        minSize : 30,
        maxSize : 55,
        num : 100,
        colors : new Array('#FF0000','#FFFFFF','#FFCC99', '#FF33CC')
    }));
</script>

然后 jQuery 代码可以工作，但 javascript 代码不工作。最后我发现当我在第一次加载后调整浏览器大小时，运行就可以了。

bubble.js 是自动创建一个canvas 元素，然后在canvas 中产生一些带有动画的气泡。

部分代码如下:

function bubblesMain(obj){
    bubbleResize();
    bubbles = new bubbleObject(obj);
    bubbles.createBubbles();
    setInterval(start,1000/60);
};

//WHEN WINDOW HEIGHT IS CHANGED, REMAKE THE CANVAS ELEMENT
window.onresize = function(event) {
    bubbleResize();
}

function bubbleResize(){
    var height = parseInt(document.getElementById("canvasBubbles").clientHeight);
    var width = parseInt(document.getElementById("canvasBubbles").clientWidth);
    document.getElementById("canvasBubbles").innerHTML = '<canvas id="canvas" width="'+width+'px" height="'+height+'px"></canvas>';
}

function start(){

    var canvas = document.getElementById("canvas");
    canvas.width = canvas.width;
    bubbles.move();
    bubbles.draw();
};

我有一个 <div id="canvasBubbles"></div>印度 html。

然后我在bubbles.js中加入如下代码后，就可以运行了。

window.onload = function(event) {
    bubbleResize();
}

我想知道是否有人可以对此提出更明智的解决方案？谢谢。

最佳答案

如其他答案所述，<script>标签应该是 </body> 之前的最后一件事标签。 See this question.

标签放置位置的问题是 HTML 页面的主体尚未加载，因此无法进行操作。 window.onload的原因和 window.onresize工作是因为它们稍后被调用，当文档的主体可用于使用 JS 进行操作时。

鉴于您在问题中提供的详细信息，您不需要 jQuery.noConflict()声明。

这是您的代码的另一个版本，它应该做同样的事情，但效率更高一些。放在body的末尾元素，就在 </body> 之前标签。我没有测试它，因为我没有所需的所有脚本(气泡等)。 

<!-- this goes at the end of your body element, just before the closing tag -->
<script type="text/javascript" src="bubbles.js"></script>
<script type="text/javascript">

    $.ready(function(){

        var canvasWrap,
            canvasElm,
            bubbles;

        init();

        setInterval(update, 1000/60);

        window.onresize = resize;

        $('#page_effect').fadeIn(3000);

        function init(){

            canvasWrap = document.getElementById("canvasBubbles");
            canvasElm = document.createElement('canvas');
            canvasElm.setAttribute('id', 'canvas');
            canvasElm.setAttribute('width', canvasWrap.clientWidth);
            canvasElm.setAttribute('height', canvasWrap.clientHeight);
            canvasWrap.appendChild(canvasElm);

            bubbles = new bubbleObject({
                type: 'linear',
                minSpeed: 100,
                maxSpeed: 400,
                minSize: 30,
                maxSize: 55,
                num: 100,
                colors: ['#FF0000','#FFFFFF','#FFCC99', '#FF33CC']
            });
            bubbles.createBubbles();
            update(); // you might not need this
        }

        function resize() {
            canvasElm.setAttribute('width', canvasWrap.clientWidth);
            canvasElm.setAttribute('height', canvasWrap.clientHeight);
        }

        function update(){
            // canvasElm.width = canvasElm.width; // is this a hack for something?
            bubbles.move();
            bubbles.draw();
        };

    });
</script>

关于javascript - 同一页面上的 jQuery 和 javascript 代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13418993/

24 4 0
文章推荐： javascript - 使新关键字可选
文章推荐： objective-c - AVCam 项目在 iPad 上崩溃
文章推荐： javascript - 检测页面来自后退按钮的方法
文章推荐： Swift 泛型强制的误解
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com