Knowledge points: RGB panchromatic loop algorithm, hex and RGB color conversion algorithm, CSS3 color gradient, CSS3 gradient compatible IE method, timer and loop, function encapsulation, array application, etc.
CSS code:
<style> *{margin:0;padding:0;} body#wrap{width:100%;height:500px;} </style>
JavaScript code:
<script> function Convert (SRGB) {/*rgb converted to hex*/var Srgb=srgb; var shex=srgb.tostring (16); Shex=shex.length<2? ' 0 ' +shex:shex/* Three mesh judging condition? Eligible: Non-conforming condition */return ShEx; } function Gcolor (Colorl,colorr) {if (Navigator.userAgent.match (/trident/i) &&navigator.us Eragent.match (/msie [7|8| 9].0/i)) {//Through regular detection browser information is IE and IE version is not 7 or 8 or 9 one oWrap.style.filter = "Progid:dxim AgeTransform.Microsoft.gradient (startcolorstr= "+ Colorl +", endcolorstr= "+ Colorr +", gradienttype=0) "; }else{owrap.style.background= '-webkit-linear-gradient (left, ' +colorl+ ', ' +colorr+ ') '//Google Owrap.style.background= '-ms-linear-gradient (left, ' +colorl+ ', ' +colorr+ ') '//ie 10 11}} })(); </script>
Web Front end small case-css3 making browser background gradient back