Home > Developer > Web Develop
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Little stars in the sky</title>6 <Metaname= "keywords"content= "Keyword list" />7 <Metaname= "description"content= "page description" />8 <Linkrel= "stylesheet"type= "Text/css"href="" />9 <styletype= "Text/css"></style>Ten <Scripttype= "Text/javascript"> One A window.onload= function(){ - //1. To turn on the timer - SetInterval ("createimg ()",4000); the } - - //represents the maximum and minimum values for a picture - varImg_min_width= the; + varImg_max_width= -; - //Control the extent of the picture appearing + varX_left= 0; A varX_right=window.innerwidth-Img_max_width; at varY_top= 0; - varY_bottom=Window.innerheight-Img_max_width; - - - //Timer function - functioncreateimg () { in //2. Create a picture Label object - varImg_node=Document.createelement ("img"); to //then add the src attribute to the tag object + Img_node.setattribute ("src","Images/xingxing.gif"); - //and append the created IMG tag to the body tag. the Document.body.appendChild (img_node); * //The image size appears randomly $ Img_node.setattribute ("width", Getrandom (img_max_width,img_min_width));Panax Notoginseng //the location of the 4 images is also randomly appearing! - varx=Getrandom (x_right,x_left); the vary=Getrandom (y_bottom,y_top); + Img_node.setattribute ("style","Position:absolute;left:"+x+"Px;top:"+y+"px;"); A //5. When the mouse clicks on the current star, it will remove the current star. the Img_node.setattribute ("onclick","removeimg (This)"); + } - $ functionGetrandom (max,min) { $ returnMath.floor (Math.random ()*(Max-min+1)+min); - } - the - //The function is to remove the current star is actually to remove the IMG tagWuyi functionremoveimg (obj) { the //The parent element of the label object that is currently being removed. RemoveChild (the Label object to remove) - obj.parentNode.removeChild (obj); Wu } - About </Script> $ </Head> - <Body> - - </Body> A </HTML>View Code
:
JS Object realization Random Sky small star instance
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
