首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用JS定位单个div

如何使用JS定位单个div
EN

Stack Overflow用户
提问于 2015-10-23 08:47:03
回答 2查看 67关注 0票数 0

我试着在一个单独的div的背景上创建“雪”。下面是代码,但你可以在这里看到:http://www.getwiththebrand.com/makeabrew_copy/我想把效果放在只有红色边框的div上(数字4)。谁能告诉我我错过了什么?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <!-- language: lang-js -->

        var width = getWidth();
        var height = getHeight();
        var flakeCount = 50;
        var gravity = 0.7;
        var windSpeed = 20;
        var flakes = [];

        function getWidth() {
            var x = 0;
            if (self.innerHeight) {
                x = self.innerWidth;
            }
            else if (document.documentElement &&     document.documentElement.clientHeight) {
                x = document.documentElement.clientWidth;
            }
            else if (document.body) {
                x = document.body.clientWidth;
            }
            return x;
        }

        function getHeight() {
            var y = 0;
            if (self.innerHeight) {
                y = self.innerHeight;
            }
            else if (document.documentElement &&     document.documentElement.clientHeight) {
               y = document.documentElement.clientHeight;
            }
            else if (document.body) {
                y = document.body.clientHeight;
            }
            return y;
        }

    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var currentFlake = 0;
    var snowglobe = document.getElementById("snowglobe");

    while (currentFlake < flakeCount) {
        var flake = document.createElement("div");
        flake.className = 'flake';
        flake.style.fontSize = getRandom(12, 24) + 'px';
        flake.style.top = getRandom(0, height) + 'px';
        flake.style.left = getRandom(0, width) + 'px';
        flake.innerHTML = "•";
        newFlake = snowglobe.appendChild(flake);
        newFlake.speed = getRandom(1, 100);
        flakes.push(newFlake);
        currentFlake++;
    }

    function doAnimation() {
        for (var i = 0; i < flakes.length; i++) {
            newX = false;
            newY = false;
            // Calculate Y position
            newY = parseFloat(flakes[i].style.top) + (flakes[i].speed / 100) * gravity;
            if (newY > height) {
                newY = 0 - parseInt(flakes[i].style.fontSize);
                // If Y is at bottom, randomize X
                newX = getRandom(0, width);
            }
            // Calculate X position if it hasn't been set randomly
            if (!newX) newX = parseFloat(flakes[i].style.left) + Math.sin(newY / windSpeed);
            if (newX < -20) newX = width + 20;
            if (newX > width + 20) newX = -20;
            // Set new position
            flakes[i].style.top = newY + 'px';
            flakes[i].style.left = newX + 'px';
        }
    }
    setInterval(doAnimation, 10);

    window.onresize = function(event) {
        width = getWidth();
        height = getHeight();
    }<!-- language: lang-css -->

    #snowglobe .flake {
        position: absolute;
        width: 1px;
        height: 1px;
        color: rgba(255,255,255,0);
        text-shadow: 0 0 3px rgba(255,255,255,1);
    }<!-- language: lang-html -->

    <div class="ui-full-width">
        <div class="container even" id="snowglobe">
            <h3><span class="num">4</span>Add freshly boiled water to the pot</h3>

            <p>Give it a stir and secure the lid. Wrap your pot in a tea-cosy if it's nippy outside!</p>            
        </div>
    </div>


<!-- end snippet -->

<div class="ui-full-width">
    <div class="container even" id="snowglobe">
        <h3><span class="num">4</span>Add freshly boiled water to the pot</h3>

        <p>Give it a stir and secure the lid. Wrap your pot in a tea-cosy if it's nippy outside!</p>            
    </div>
</div>
EN

回答 2

Stack Overflow用户

发布于 2015-10-23 09:05:07

当您的myjs.js加载到我的浏览器中时,它在文件的末尾有一个额外的字符,它会触发一个正确的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
SCRIPT1014: Invalid character
myjs.js (116,2)

脚本部分:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.onresize = function(event) {
   width = getWidth();
   height = getHeight();
}â // << here

另外,我不知道你使用的是什么浏览器,但试着点击F12,你会看到控制台,你会看到javascript错误和其他有用的信息。

编辑:更糟糕的是,your script的末尾有多个字符

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.onresize = function(event) {
    width = getWidth();
    height = getHeight();
}​ // ??

你有没有弄乱一些文件编码选项?

票数 0
EN

Stack Overflow用户

发布于 2015-10-25 01:24:35

谢谢你的关注。我注释掉了代码,所以这就是额外的字符。我还没有对文件编码选项做任何修改。

我检查了控制台,发现有一些元素没有定义。看起来我遗漏了一整块:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var width = getWidth();
var height = getHeight();
var flakeCount = 50;
var gravity = 0.7;
var windSpeed = 20;
var flakes = [];

现在一切正常了!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33298272

复制
相关文章
定位div到窗口固定位置
代码来自网络~ /*任意位置浮动固定层*/ /*调用: 1 无参数调用:默认浮动在右下角 $("#id").floatdiv(); 2 内置固定位置浮动 //右下角 $("#id").floatdiv("rightbottom"); //左下角 $("#id").floatdiv("leftbottom"); //右下角 $("#id").floatdiv("rightbottom"); //左上角 $("#id").floatdiv("lefttop"); //右上角 $("#id").floatdiv
苦咖啡
2018/04/28
2.5K0
js动态添加div
因为每个input标签的name如果相同的话, 在后端接收的时候会出错, 所以我的解决办法就是在name后加上一个数字, 后端用一个循环进行接收
烟草的香味
2019/07/25
24.5K0
CSS 定位布局 - 绝对、固定定位设置居中悬浮div
在上一篇 CSS 定位布局 - 相对、绝对、固定三种定位 中,发现当使用定位布局的时候,存在一个无法使用margin居中的方法。
Devops海洋的渔夫
2019/05/31
3.4K0
原生js拖拽指定div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js拖拽效果</title> </head> <body> <div id="box"></div> <script type="text/javascript"> var oBox = document.getEle
李维亮
2021/07/09
9.9K0
JS-随机div颜色
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="author" content="郭菊锋702004176@qq.com"/> 7 <style type="text/css"> 8 div{ 9 width: 100px; 1
xing.org1^
2018/05/17
18.2K0
Div滚动条定位设置「建议收藏」
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/157990.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/14
2.9K0
div定位在浏览器底部(CSS解决)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档
用户1730674
2018/05/02
9330
JS实现鼠标拖动div移动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript">
小小鱼儿小小林
2020/06/23
34.4K0
如何使用gps定位模拟器
gps定位模拟器广泛应用设备的研制、开发、生产和测试等环节。本文主要介绍gps定位模拟器如何使用。
时频专家
2020/07/20
2.3K0
div 环形排列_三个div如何并排
红色点:为每个黄色DIV的坐标点;即绝对定位时的元素,left值 和 top值 ,设置的点;
全栈程序员站长
2022/09/19
2.8K0
div 环形排列_三个div如何并排
3)js的基础语法使用以及css定位
var north = ['北京','山东','天津']; var south = ['东莞','深圳','上海']; var newCity = north.concat(south); console.log(newCity)
py3study
2020/01/08
9910
js / css 设置div不可点击
css: .notclick{ pointer-events: none; } js: $("#divID"/".divClass").addClass("notclick");//设为不可点击 $("#divID"/".divClass").removeClass("notclick");//移除不可点击
用户10106350
2022/10/28
30.8K0
在可编辑div中定位光标和设置光标
当我们去点击一个输入框的时候,就会产生一个选中对象 selection,就是我们可以看到的文字变成蓝色的那个区域,selection在火狐浏览器可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开始和结束的。
越陌度阡
2020/11/26
9.5K0
js动态创建div等元素实例
为了节省时间,就直接贴代码了!希望大家多多的关注我! <html> <head> <title>js动态创建div等元素实例</title> <style type="text/css"> </style> </head> <body> <script language="javascript"> var Test={ createDiv:function(){ var div = document.createElement
业余草
2019/01/21
12.3K0
div在div中垂直居中水平居中(css如何让div水平居中)
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法
全栈程序员站长
2022/08/01
15.1K0
div在div中垂直居中水平居中(css如何让div水平居中)
如何使用 Arthas 定位 Spring Boot 接口超时 ?
公司有个渠道系统,专门对接三方渠道使用,没有什么业务逻辑,主要是转换报文和参数校验之类的工作,起着一个承上启下的作用。
肉眼品世界
2021/07/13
1.6K0
如何使用 Arthas 定位 Spring Boot 接口超时 ?
如何使用 Arthas 定位 Spring Boot 接口超时 ?
公司有个渠道系统,专门对接三方渠道使用,没有什么业务逻辑,主要是转换报文和参数校验之类的工作,起着一个承上启下的作用。
java进阶架构师
2021/07/08
2.2K0
如何使用 Arthas 定位 Spring Boot 接口超时 ?
带左右箭头切换div的js 原
(adsbygoogle = window.adsbygoogle || []).push({});
tianyawhl
2019/04/04
12.5K0
如何使用 Arthas 定位 Spring Boot 接口超时
作者 | 空无 来源 | https://segmentfault.com/a/1190000020383866 背景 公司有个渠道系统,专门对接三方渠道使用,没有什么业务逻辑,主要是转换报文和参数校验之类的工作,起着一个承上启下的作用。 最近在优化接口的响应时间,优化了代码之后,但是时间还是达不到要求;有一个诡异的100ms左右的耗时问题,在接口中打印了请求处理时间后,和调用方的响应时间还有差了100ms左右。比如程序里记录150ms,但是调用方等待时间却为250ms左右。 下面记录下当时详细的定位&解
程序猿DD
2023/04/17
1.3K0
如何使用 Arthas 定位 Spring Boot 接口超时
点击加载更多

相似问题

使用JS定位div

11

使用JS重新定位div

21

如何使用内联JS来定位div的firstLetter?

651

从JS代码定位div

22

JS扩展Div的定位

30
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文