Javascript适用于doctype html4，但不适用于html5

Question

I've attempted to run several of the "falling snow background" type scripts available at scriptmania. Just javascript, no jquery.

I'm puzzled by the fact that some of them work fine in IE, but fail to animate in FF, Chrome or Safari when the doctype is set to HTML5. The scripts do run in any of the above browsers when the doctype is set to HTML 4.0 Transitional.

Here are links to a couple of scripts that have this behavior:

http://rainbow.arch.scriptmania.com/scripts/bg/snow_fall.html

http://rainbow.arch.scriptmania.com/scripts/bg/autumn_fall_timeout.html

Any pointers as to what might be the root cause of the failures and/or fixes would be appreciated.

Answer 1

The HTML 4.01 Transitional Doctype with no URL component triggers Quirks mode in browsers.

The HTML 5 Doctype triggers standards mode in browsers.

In Quirks mode, numerous bugs of older browsers (from the 1990s) are emulated.

Dependancy on any of these bugs could be the cause of the problem, but the most likely is that something is setting a CSS property which expects a length but giving it a Number . Lengths other than 0 require units (such as 23px ).

Answer 2

Web Oficial:

http://rainbow.arch.scriptmania.com/scripts/bg/snow_fall_2.html

Download:

http://rainbow.arch.scriptmania.com/scripts/bg/snowstorm.js

Code:

<!-- SNOW TAGS START -->

<!-- Copy the <script> tag into your own page(s) for the snow effect. That is all! (No CSS etc. is needed) -->
<script type="text/javascript" src="snowstorm.js"></script>
<!-- now, we'll customize the snowStorm object -->
<script type="text/javascript">
snowStorm.flakesMaxActive = 95; // show more snow on screen at once
snowStorm.snowStick = true; // When false, snow will never sit at the bottom
snowStorm.animationInterval = 33; // 20 = fast + smooth, but 50 = more but slower
</script>

<!-- SNOW TAGS END -->

---

Open your file snowstorm.js is go line 41

before:

this.zIndex = 0; // CSS stacking order applied to each snowflake

after:

this.zIndex = 1000; // CSS stacking order applied to each snowflake

Problem body layer is can not see the snow to mean 0 is none, so the need to change for 1000 is available see the front of the body shows snow in front.

---

sry bad english

Merry Christmas 2014 and New years 2015 ;-)