1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 var btn_obj = document.getElementById("yc"); 9 btn_obj.onclick = function(){ 10 var div_obj = document.getElementsByTagName('div')[0]; 11 if (div_obj.style.display == "none") { 12 div_obj.style.display = "block"; 13 }else { 14 div_obj.style.display = "none"; 15 } 16 } 17 } 18 var wd; 19 function op () { 20 var url = "满天星案例.html"; 21 var names = "打开电脑中的网页"; 22 var option = "width=300,height=300"; 23 wd = window.open(url,names,option); 24 } 25 function cl () { 26 window.close(); 27 } 28 29 </script> 30 </head> 31 <body> 32 <div style="width:200px; height:200px; background-color:#0f0; display:none;"></div> 33 <button id="yc">显示或隐藏</button> 34 <button onclick="cl()">关闭窗口</button> 35 <button onclick="op()">打开新窗口</button> 36 </body> 37 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style class="text/css"> 7 div{ 8 border: 1px solid #f00; 9 } 10 </style> 11 <script type="text/javascript"> 12 //createTagName 在后面添加一个新的标签 13 function createTagName(){ 14 //node 节点 15 var img_node = document.createElement("img"); 16 //把创建的标签追加到body标签里面去 17 //appendChild(要追加的标签对象) 18 document.body.appendChild(img_node); 19 img_node.setAttribute("src","images/en.jpg"); 20 } 21 22 </script> 23 </head> 24 <body> 25 <button onclick="createTagName()">创建标签</button> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 setInterval("createImg()",1000); 9 } 10 var img_min_width = 15; 11 var img_max_width = 90; 12 13 var X_left = 0; 14 var x_right = window.innerWidth-img_max_width; 15 var y_top = 0; 16 var y_bottom = window.innerHeight-img_max_width; 17 18 19 20 function createImg () { 21 var img_node = document.createElement("img"); 22 img_node.setAttribute("src","images/xingxing.gif"); 23 document.body.appendChild(img_node); 24 img_node.setAttribute("width",getRandom(img_min_width,img_max_width)); 25 var x = getRandom(x_right,X_left); 26 var y = getRandom(y_bottom,y_top); 27 img_node.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;"); 28 img_node.setAttribute("onclick","removeImg(this)"); 29 } 30 31 function getRandom (max,min) { 32 return Math.floor(Math.random()*(max-min+1)+min); 33 } 34 function removeImg(obj){ 35 obj.parentNode.removeChild(obj); 36 } 37 </script> 38 </head> 39 <body> 40 41 </body> 42 </html>
