HTML中的降雪_编程黑洞网

我是一个初学者，我为妈妈做了HTML的Snowfall。我敢肯定，对于任何开发人员来说，它看起来都不会很棒，但是，这就是为什么我将其发布的原因。我特别关心此HTML的质量和增强功能。

<h1>Happy Winter!</h1><script>

var snowmax=35
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
var snowletter="*"
var sinkspeed=0.6
var snowmaxsize=22
var snowminsize=8
var snowingzone=3

var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||ns6||opera

function randommaker(range) {       
    rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
    if (ie5 || opera) {
        marginbottom = document.body.clientHeight
        marginright = document.body.clientWidth
    }
    else if (ns6) {
        marginbottom = window.innerHeight
        marginright = window.innerWidth
    }
    var snowsizerange=snowmaxsize-snowminsize
    for (i=0;i<=snowmax;i++) {
        crds[i] = 0;                      
        lftrght[i] = Math.random()*15;         
        x_mv[i] = 0.03 + Math.random()/10;
        snow[i]=document.getElementById("s"+i)
        snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
        snow[i].size=randommaker(snowsizerange)+snowminsize
        snow[i].style.fontSize=snow[i].size
        snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
        snow[i].sink=sinkspeed*snow[i].size/5
        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
        snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
        snow[i].style.left=snow[i].posx
        snow[i].style.top=snow[i].posy
    }
    movesnow()
}

function movesnow() {
    for (i=0;i<=snowmax;i++) {
        crds[i] += x_mv[i];
        snow[i].posy+=snow[i].sink
        snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
        snow[i].style.top=snow[i].posy

        if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
            if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
            if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
            if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
            if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
            snow[i].posy=0
        }
    }
    var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
    document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
    window.onload=initsnow
}

我希望你妈妈不要使用IE 5/6。

她正在使用FF最新版本

@Ducky Use ❄ for snowflakes

var browserok = !! document.getElementById;相当于您的浏览器检测很重要

加！ document.write（）！我的眼睛！我的眼睛!!!

#1 楼

一些建议：

使用更多的空格和分号

通过[]初始化数组

var snowcolor = ["#aaaacc", "#ddddFF", "#ccccDD"];

对变量和方法名称使用命名约定，以使它们更易读。因此，您可以编写

initSnow() or init_snow()
browserInfos or browser_infos

而不是

var marginbottom
var marginright
var timer

而不是将字符串传递给setTimeout，您可以直接将引用传递给该函数

var marginbottom,
    marginright,
    timer;

您的代码中有一些魔术数字，您可能希望将其提取为变量。
由于JavaScript没有final static变量（afaik），请考虑通过命名约定对其进行标记。例如：

var timer = setTimeout(movesnow, 50);

initsnow和movesnow内部的四个if语句似乎是相同的，因此可以将它们移至单独的函数。但是，当前您将snowingzone设置为固定值，并且您没有对其进行更改。因此，if语句是不必要的。
有些变量名称相当隐蔽：x_mv，lftrght等。
还有一些未使用的变量：例如i_snow
浏览器标识和browserok的“计算”似乎是单独功能的不错选择。

更新添加了8-11。 />如果您有信心或想尝试静态代码分析，则可能需要研究一下http://www.jslint.com/或http://www.jshint.com/。他们可以警告您有关全局变量，未使用的变量以及更多信息。例如：

var SNOW_MAX_SIZE = 22;

\ $ \ begingroup \ $
Re：4.这样做并非总是一个好主意。例如，您可能会发现自己不小心使用了分号而不是逗号。在这种情况下，您将无意中污染全局范围。
\ $ \ endgroup \ $
–分裂
2014年6月6日下午13:37

\ $ \ begingroup \ $
@schism您可以详细说明吗？我在声明var与不声明时仍在尝试研究js变量范围的所有细微差别-第一次听到逗号vs;也有影响。
\ $ \ endgroup \ $
– HC_
14年6月6日在17:44

\ $ \ begingroup \ $
@HC_不是那个；影响全局空间，而不会。 javascript中的分号标记了一条语句的结尾，其后的所有代码均被视为新语句。因此，如果您不小心使用了分号，那么现在您的代码如下所示：var foo;巴兹它隐式地将bar，baz声明为全局范围内的变量，因为它们现在是与var关键字分开的自己的语句。 Schism只是指出，这是一个容易犯的错误，也是一种巩固全球空间的快速方法。
\ $ \ endgroup \ $
–瑞安
2014年6月6日18:14

\ $ \ begingroup \ $
@Schism，您说得对，为答案添加了一个简短示例
\ $ \ endgroup \ $
– Syjin
2014年6月6日19:39

\ $ \ begingroup \ $
也请不要使用document.write。相反，您可以使用body.appendChild。此外，缺少parseInt基数。
\ $ \ endgroup \ $
–钢
2014年6月17日在11:05

#2 楼

我建议不要为整个程序一次调用setTimeout()，而建议在整个程序中只调用一次movesnow()。但是，似乎setInterval()硬编码为3，所以我不确定您的真正意图是什么。

尽管JavaScript并没有将每个语句都以明确的分号结尾，这是一种好习惯不需要它。

我建议将initsnow()数组重命名为movesnow()，并可能以相同的方式重命名其他一些变量。我不确定snowingzone变量代表什么-该缩写对我来说太神秘了。

\ $ \ begingroup \ $
从代码来看，我相信crds代表坐标。但是我确实同意它是神秘的，应该重新命名以更清楚。
\ $ \ endgroup \ $
– and31415
2014年6月6日12:15

\ $ \ begingroup \ $
我甚至会使用requestAnimationFrame而不是setInterval，因为它用于动画而不是I / O。
\ $ \ endgroup \ $
–右键
2014-6-7 13:57

#3 楼

我已经很长时间没有从事任何Web开发了，所以我将您的实际问题留给专家们解决。我只想指出一个小风格点。您的变量分配可能会占用一些呼吸空间。

var crds = new Array();

for循环中也有相同内容。

for (i = 0; i <= snowmax; i++) {

#4 楼

除了上面的答案（我完全同意）之外，我还有两点：

使用switch语句和/或智能代码分解，以便/>

if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

更改为

switch( snowingzone ) {
    case 1:
        snow[i].posx = randommaker( marginright - snow[i].size ); break;
    case 2:
        snow[i].posx = randommaker( marginright / 2-snow[i].size ); break;
    case 3:
        snow[i].posx = randommaker( marginright / 2-snow[i].size ) + marginright / 4; break;
    case 4:
        snow[i].posx = randommaker( marginright / 2-snow[i].size ) + marginright / 2; // break; is optional here, you may use it for clarity
}

或更简洁地说，

snow[i].posx = randommaker( marginright / ( snowingzone == 1 ) ? 1 : 2 - snow[i].size);
if ( snowingzone == 3 )
    snow[i].posx += marginright / 4;
else if ( snowingzone == 4 )
    snow[i].posx += marginright / 2;

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switch

不要使用以下内容创建DOM元素：

document.write("&lt;span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"&lt;/span>");

相反，您应该使用：

这允许您直接创建薄片数组，并完全跳过调用snow[i]=document.getElementById("s"+i)。

https://developer.mozilla.org/zh-CN/docs/Web/ API / document.createElement

编程黑洞网

HTML中的降雪

评论

#1 楼

评论

#2 楼

评论

#3 楼

#4 楼