基础
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Demo111</title> 5 <!--获取日期--> 6 <script> 7 function displayDate(){ 8 document.getElementById("lala").innerHTML = Date(); 9 } 10 </script> 11 </head> 12 13 <body> 14 <h1>My First JavaScript Program</h1> 15 <p id = "lala">This is a para.</p> 16 <button type = "button" onclick = "displayDate()">Display Date</button> 17 <p>------------------------------</p> 18 <!--直接写入输入流--> 19 <script type="text/javascript"> 20 document.write("<h1>This is a head.</h1>"); 21 document.write("<p>This is a para.</p>"); 22 </script> 23 <p>JavaScript can write in the HTML inputstream directly.</p> 24 <p>You just can write <strong>document.write</strong>.</p> 25 <p>------------------------------</p> 26 <!--弹出对话框--> 27 <button type = "button" onclick = "alert('Welcome!')">Click~</button> 28 <p>------------------------------</p> 29 <!--改变文字内容--> 30 <p id = "demo">JavaScript can change the comments of a HTML element.</p> 31 <script> 32 function myFunction(){ 33 x = document.getElementById("demo"); 34 x.innerHTML = "Hello JavaScript!"; 35 } 36 </script> 37 <button type = "button" onclick = "myFunction()">Click!</button> 38 <p>-------------------------------</p> 39 <!--改变图片内容--> 40 <script> 41 function changeImg(){ 42 element = document.getElementById("myImg"); 43 if(element.src.match("ASCII")) 44 element.src = "eclipse快捷键.png"; 45 else 46 element.src = "ASCII.jpg"; 47 } 48 </script> 49 <img id = "myImg" onclick = "changeImg()" src = "ASCII.jpg" width = "100" height = "180"> 50 <p>Click the pic ~</p> 51 <p>--------------------------------</p> 52 <!--改变文字样式--> 53 <p id = "color">Change the color</p> 54 <script type="text/javascript"> 55 function changeColor(){ 56 x = document.getElementById("color") 57 x.style.color = "#ff0886"; 58 } 59 </script> 60 <button type = "button" onclick = "changeColor()">Change the color!</button> 61 <p>---------------------------------</p> 62 <!--验证输入--> 63 <p>Please enter the number. If input value is not a number, the browser will pop up the prompt. </p> 64 <input id = "in" type = "text"> 65 <script> 66 function isNumber(){ 67 var x = document.getElementById("in").value; 68 if(x == "" || isNaN(x)) 69 alert("Not a number."); 70 else 71 alert("Yes!") 72 } 73 </script> 74 <button type = "button" onclick = "isNumber()">Is a Number?</button> 75 <p>----------------------------------</p> 76 </body> 77 </html>