javascriptは星をランダムに表示する効果を実現します.

1893 ワード

本論文の実例はjavascriptが星の特殊効果をランダムに表示するための詳細コードを説明しています.具体的な内容は以下の通りです.
  • (1)ウェブページの背景は暗いです. 
  • (2)星のランダムサイズ:min=15,max=80 
  • (3)星の座標はランダムです.
  •               x_left=0,x_right=(ブラウザー幅-星幅)
  •               y_top=0,y_bottom=
  • (4)ある星をクリックして、星が消えます.
  • (5)ウェブページのロードが完了し、星
  • が表示され始めました.
  • (6)タイマー:周期ごとに、星を一つ挿入します.
    
    
    
    
         
    
    //      
    var img_width_min = 15;
    var img_width_max = 80;
    var x_left = 0;
    var x_right = 0;
    var y_top = 0;
    var y_bottom = 0;
    
    //        
    function init()
    {
     document.body.bgColor = "#000";
     x_right = window.innerWidth - img_width_max;
     y_bottom = window.innerHeight - img_width_max;
     //   
     setInterval("showStar()",1000);
    }
    //    
    function showStar()
    {
     //      
     var node_img = document.createElement("img");
     //           
     var width = getRandom(img_width_min,img_width_max);
     var x = getRandom(x_left,x_right);
     var y = getRandom(y_top,y_bottom);
     //  src   
     node_img.setAttribute("src","images/xingxing.gif");
     //  style  
     var style = "position:absolute;left:"+x+"px;top:"+y+"px;";
     style += "width:"+width+"px;";
     node_img.setAttribute("style",style);
     //    onclick    
     node_img.setAttribute("onclick","removeImg(this)");
     //      <body>   
     document.body.appendChild(node_img);
    }
    function removeImg(obj)
    {
     document.body.removeChild(obj);
    }
    function getRandom(min,max)
    {
     return Math.floor(Math.random()*(max-min)+min);
    }
    
    
    
    
    
    
    
    本論文で述べたように、皆さんのjavascriptプログラムの設計に役に立ちます.