很多的例子是在这一个文件中练习,有的没有注释,要仔细了,以备后期复习.
①ｈｔｍｌページ：
ｈｔｍｌ
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 6 <!-- <meta http-equiv="refresh" content="2"/> 页面的刷新--> 7 8 <title>JavaScript</title> 9 <script language="javascript" src="js.js"> 10 //document.write("JAVASCRIPT WELCOME TO YOU ようこそ"); 11 </script> 12 13 <STYLE type="text/css"> 14 <!-- 15 input 16 { 17 background-color: #55FFFF; 18 font-size: 20px; 19 border: 2px solid; 20 } 21 select{ 22 background-color: #55FFFF; 23 font-size: 20px; 24 border: 2px solid; 25 } 26 --> 27 </STYLE> 28 29 </head> 30 31 <body > 32 <!-- &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&基本测试&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&--> 33 34 <p><center >NEC済南(Html中)</center> 35 <form id="calc" name="calc" method="post" action="js.html"> 36 <table width="300" border="0" align="center"> 37 <tr> 38 <td><center>报销金额计算</center></td> 39 </tr> 40 <tr> 41 <td>Price: 42 <label for="num1"></label> 43 <input type="text" name="num1" value="100" onfocus="clearText()" onblur="check()"/></td> 44 </tr> 45 <tr> 46 <td>Numbers: 47 <label for="num2"></label> 48 <select name="num2" > 49 <option value="" selected="selected">---请选择数目---</option> 50 <option value="1"/>1 51 <option value="2"/>2 52 <option value="3"/>3 53 <option value="4"/>4 54 <option value="5"/>5 55 </select></td> 56 <!-- <input type="checkbox" name="num2" value="5" readonly="readonly" onfocus="waning()" size="1"/></td> 这里是当此文本框不能被改编时。--> 57 </tr> 58 <tr> 59 <td>Total: 60 <label for="result"></label> 61 <input type="text" name="result" onchange="total()" /></td> 62 </tr> 63 <tr> 64 <td> 65 <input type="button" name="answer" onclick="calcf()" value="計算" /> 66 <input type="reset" name="reset" value="リセット" onclick="select_f()"/></td> 67 </tr> 68 </table> 69 </form> 70 71 <!-- 72 <form id="form1" name="form1" method="post" action=""> 73 <table width="300" border="0"> 74 <tr> 75 <td>Number1： 76 <label for="num1"></label> 77 <input type="text" name="num3" id="num1" /></td> 78 </tr> 79 <tr> 80 <td>Number2： 81 <label for="num2"></label> 82 <input type="text" name="num4" id="num2" /></td> 83 </tr> 84 <tr> 85 <td> Operte： 86 <input type="button" name="addbutt" value="加" onclick="f('+')"/> 87 <input type="button" name="subbutt2" value="减" onclick="f('-')"/> 88 <input type="button" name="mulbutt3" value="乘" onclick="f('*')"/> 89 <input type="button" name="divbutt4" value="除" onclick="f('/')"/></td> 90 </tr> 91 <tr> 92 <td> Result： 93 <label for="result"></label> 94 <input type="text" name="result" /></td> 95 </tr> 96 </table> 97 </form> 98 --> 99 100 101 <!-- 102 <form name="msg" method="post" action=""> 103 <table width="300" border="0" > 104 <tr> 105 <td>Name: 106 <input type="text" name="username" /> </td> 107 </tr> 108 <tr> 109 <td> Tel: 110 <input type="text" name="Tel" /></td> 111 </tr> 112 <tr> 113 <td>E-Mail: 114 <label for="Email"></label> 115 <input type="text" name="email" /></td> 116 </tr> 117 <tr> 118 <td><p style="text-align:left">Context:</p> 119 <label for="textarea"></label> 120 <textarea name="context" cols="45" rows="5"></textarea></td> 121 </tr> 122 <tr> 123 <td> 124 <input type="submit" name="Send" value = "送付" onclick="msgf()"/> 125 <input type="reset" name="reset" value="リセット" /></td> 126 </tr> 127 </table> 128 </form> 129 --> 130 131 <!-- &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&测试windows对象&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&--> 132 <!-- 133 <p> 134 <input type="button" name="open" value="Open" onclick="openf()"/> 135 <input type="button" name="close" value="close" onclick="closef()" /> 136 137 <input type="button" onclick="openwindow()" /><H2>広告を表示</H2> 138 --> 139 140 <!-- ******************************************************测试windows对象,浮动的广告*******************************************************--> 141 142 <!-- 143 <DIV id="Layer1" style="position:absolute; left:0px; top:0; 150px; height:102px; z-index:1"> 144 <A href="http://www.baidu.com"><IMG src="1.jpg" width="100" height="100" border="0"></A> 145 </DIV> 146 <H2>移動の広告</H2> 147 --> 148 149 <!-- &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&测试事件&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&--> 150 <!-- 151 <FORM name="myform"> 152 <H2>カード ID： 153 <INPUT name = card type = text onFocus="myfun1( )" 154 value="書式を注意：10xxxxxx" onBlur="myfun2( )" /> 155 <BR> 156 パスワード： <INPUT name = "pass" type = "text" /> 157 </H2> 158 </FORM> 159 --> 160 161 <!-- 162 163 <A href="http://www.baidu.com"> 164 <IMG src="1.jpg" name="picture" width="100" 165 height="100" onMouseOver=" src='4.jpg' " 166 onMouseOut=" src='2.jpg' ">画像の変換 </A> 167 <H1>マウスカーソルがオブジェクトから重なった、離れた時、画像を変換</H1> 168 169 --> 170 171 <!-- &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&document的属性&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&--> 172 <!-- 173 <H2> マウスが重なる時、色は変更する！</H2> 174 <FONT size=4> 175 <SPAN onMouseOver="change('red')" onmouseout="oldbgcolor()">赤い</SPAN>| 176 <SPAN onMouseOver="change('blue')" onmouseout="oldbgcolor()">青い</SPAN>| 177 <SPAN onMouseOver="change('yellow')" onmouseout="oldbgcolor()">黄色</SPAN> 178 </FONT> 179 --> 180 181 182 <!-- &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&复选框 - 事件处理程序&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&--> 183 <form name="myform"> 184 NoteBook1: 185 <INPUT name="mybox" type="checkbox" id="mybox" value="NoteBook1"><br /> 186 NoteBook2: 187 <INPUT name="mybox" type="checkbox" id="mybox" value="NoteBook2"><br /> 188 NoteBook3: 189 <INPUT name="mybox" type="checkbox" id="mybox" value="NoteBook3"><br /> 190 NoteBook4: 191 <INPUT name="mybox" type="checkbox" id="mybox" value="NoteBook4"><br /> 192 NoteBook5: 193 <INPUT name="mybox" type="checkbox" id="mybox" value="NoteBook5"><br /> 194 NoteBook6: 195 <INPUT name="mybox" type="checkbox" id="mybox" value="NoteBook6"><br /> 196 NoteBook7: 197 <INPUT name="mybox" type="checkbox" id="mybox" value="NoteBook7"><br /> 198 NoteBook8: 199 <INPUT name="mybox" type="checkbox" id="mybox" value="NoteBook8"><br /> 200 201 买家确认: 202 <input name="myradio" type="radio" id="myradio" value="买家确认" /><br /> 203 卖家确认: 204 <input name="myradio" type="radio" id="myradio" value="卖家确认" /><br /> 205 206 207 <input name="submit" type="submit" value="提交" onclick="buy()"/><br /> 208 </form> 209 210 211 212 </body> 213 </html>
②ｊｓページ：
javascript
1 // JavaScript Document 2 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 3 /* 4 document.write("Welcome to NEC(済南)" + "<BR>"); 5 document.write("link js中\n"); 6 var x ; 7 x = prompt("Please input a number……",5); 8 9 document.write("Your Number is:"+ x + "<BR>"); 10 document.write("How about it???"); 11 alert("Good Bye!!!"); 12 */ 13 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 14 /* 15 var x=100; 16 var y; 17 var z; 18 document.write("<H2>SONYのカメラ" +x+"$から競売</H2>"); 19 y=prompt("何円を増える","1"); 20 z=x+parseFloat( y ); 21 alert("最終競売の価格\n"+z+"$"); //"\n"変換行 22 document.write("最終競売の価格\n"+z+"$"); 23 */ 24 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 25 26 /* 27 function calcf(){ 28 29 var number1 = document.calc.num1.value; 30 var number2 = document.calc.num2.value; 31 var total = parseFloat(number1) * parseFloat(number2); 32 document.calc.result.value = total; 33 } 34 35 */ 36 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 37 38 var myDate = new Date(); 39 document.write("<center>"+"系统的当前时间：" + myDate.getFullYear() + "年" + (myDate.getMonth() + 1)+ "月" +myDate.getDate() + "日" + myDate.getHours() + "时" + myDate.getMinutes() + "分" + myDate.getSeconds() + "秒" + "<BR>" + "</center>"); 40 41 //以系统默认显示当前的时间和日期，但是不理想。 42 /* 43 var mydate=new Date( "July 29, 1998,10:30:00 ") 44 document.write(mydate + "<BR>"); 45 */ 46 47 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 48 //js对象的测试2； 49 /* 50 document.write("2秒更新" + "<BR>"); 51 var i = 0; 52 i = Math.round(Math.random() * 8 + 1); 53 document.write("<IMG width=100 height=100 src="+ i +".jpg>"); 54 */ //------------------------------------------------------------------------------------------------------------------------------------------------------------ 55 56 57 //实现两数字的相乘运算，在其中要验证输入的正确和结果的正确。 58 //document.write(LocalDateDemo()); 59 function calcf(){ 60 61 var number1 = document.calc.num1.value; 62 var number2 = document.calc.num2.value; 63 var total = parseFloat(number1) * parseFloat(number2); 64 65 if((number1 == "") || (number2 == "")){ 66 alert("您漏输入项目了，请检查："); 67 } 68 69 document.calc.result.value = total; 70 71 72 if(total >= 10000){ 73 alert("金额太大不能报销！\n请修改之后再计算报销额。"); 74 } 75 76 return; 77 } 78 79 80 function clearText( ) 81 { 82 if (document.calc.num1.value=="100") 83 document.calc.num1.value="" ; 84 } 85 86 function check() 87 { 88 var a=document.calc.num1.value; 89 if (a%10!=0 || isNaN(a)) 90 { 91 alert("请输入10的整数倍数。") ; 92 document.calc.num1.focus(); 93 document.calc.num1.select(); 94 } 95 } 96 97 function select_f(){ 98 document.calc.num1.focus(); 99 100 } 101 102 //Menu(eval("document.calc"),1) 103 104 105 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 106 107 /*for循环联系打印直线的三角形 108 document.write("输出了一个金字塔"); 109 for(var i = 0 ;i <=50; i=i+2){ 110 document.write("<HR align = center color = red width = "+ i + "%>"); 111 } 112 */ 113 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 114 /* 115 document.write("<H3>1つ文字は1つエジプト画像を対応する</H3>"); 116 do 117 { 118 var c = prompt("1つ文字を入力ください。N又はｎを入力時、中止","A") ; 119 document.write ("<font class=myfont >"+c+"</font>"); 120 }while (c !="N" && c !="n"); 121 122 */ 123 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 124 /* 125 var str1=prompt("1つ式を入力し、計算する","1+1"); 126 var result=eval(str1); 127 document.write(str1+"="+result); 128 var x = prompt("1つ数字を入力してください","0"); 129 if (isNaN(x)) 130 alert (x + "数字がではない"); 131 else 132 alert (x + "数字です"); 133 */ 134 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 135 function f (op){ 136 var num1 = parseFloat (document.form1.num1.value); 137 var num2 = parseFloat (document.form1.num2.value); 138 139 if((num1 != "") && (num2 != "")){ 140 141 switch(op){ 142 143 case "+": 144 document.form1.result.value=num1+num2; 145 break; 146 147 case "-": 148 document.form1.result.value = num1 - num2; 149 break; 150 151 case "*": 152 document.form1.result.value = num1 * num2; 153 break; 154 155 case "/": 156 if(num2 == 0){ 157 alert("在进行除法运算时：除数不能为0！！！"); 158 } 159 document.form1.result.value = num1 / num2; 160 break; 161 162 default: 163 document.form1.result.value = null; 164 } 165 } 166 else{ 167 alert("您漏输入项目了，请检查："); 168 169 } 170 171 return; 172 } 173 174 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 175 /*这个是检测Email格式的函数*/ 176 function chk(i){ 177 d=i.match(/^\S+@\S+\.\S+$/); 178 if(!d||!i)return false; 179 return true; 180 } 181 182 183 //用户留言的判断 184 function msgf(){ 185 var username = document.msg.username.value; 186 var email = document.msg.email.value; 187 var context = document.msg.context.value; 188 189 //判断用户名是否为空 190 if(username != ""){ 191 document.msg.username.focus(); 192 //判断邮箱的地址是否为空 193 if(document.msg.email.value != ""){ 194 //判断邮箱的格式是否正确 195 if(chk(document.msg.email.value)){ 196 197 //判断留言的内容是否为空 198 if(context != ""){ 199 alert("确认提交吗？"); 200 201 } 202 203 else{ 204 alert("留言内容不能为空，请重新输入！"); 205 return false; 206 } 207 } 208 209 else{ 210 alert("请输入你的正确的邮箱地址！"); 211 return false; 212 } 213 } 214 215 else{ 216 alert("请输入您的正确的邮箱地址："); 217 return false; 218 } 219 } 220 221 else{ 222 alert("用户名不能为空！"); 223 return false; 224 } 225 226 } 227 228 229 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 230 231 //测试windows对象 232 233 function openf(){ 234 window.open("js.html"); 235 } 236 237 function closef(){ 238 window.close(); 239 } 240 241 242 /* 243 open（"打开窗口的url"，"窗口名"，"窗口特征"） 244 窗口的特征如下，可以任意组合： 245 height： 窗口高度； 246 width： 窗口宽度； 247 top： 窗口距离屏幕上方的象素值； 248 left：窗口距离屏幕左侧的象素值； 249 toolbar： 是否显示工具栏，yes为显示； 250 menubar，scrollbars 表示菜单栏和滚动栏。 251 resizable： 是否允许改变窗口大小，yes或1为允许 252 location： 是否显示地址栏，yes或1为允许 253 status：是否显示状态栏内的信息，yes或1为允许； 254 */ 255 function openwindow( ) 256 { 257 window.open("content.html", "", "top = 100 ,left = 100,toolbars=0, scrollbars=1,location=0, statusbars=0, menubars=0,resizable=0, width=300, height=300 "); 258 259 } 260 261 //-------------------------------------------------------------------页面上元素的移动--------------------------------------------------------------------- 262 function move( ) 263 { 264 document.getElementById("Layer1").style.left= Math.random()*500 ; 265 document.getElementById("Layer1").style.top= Math.random()*500; 266 setTimeout("move()",1000); 267 } 268 269 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 270 //测试事件 271 function myfun1( ) 272 { 273 if (document.myform.card.value=="書式を注意：10xxxxxx") 274 document.myform.card.value="" ; 275 } 276 277 function myfun2( ) 278 { 279 var a=document.myform.card.value; 280 if (a.substr(0,2)!="10" || isNaN(a)) 281 { 282 alert("書式が間違って、再入力してください。") ; 283 document.myform.card.focus(); 284 } 285 } 286 287 288 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 289 //document的属性 290 function change(color) 291 { 292 document.bgColor=color ; 293 294 } 295 296 function oldbgcolor(){ 297 document.bgColor=""; 298 } 299 300 //------------------------------------------------------------------------------------------------------------------------------------------------------------ 301 //复选框 - 事件处理程序 302 function buy( ) 303 { 304 var s=""; 305 for (var i=0;i< document.myform.mybox.length;i++) 306 { 307 //第iチェックボックスを選択されたことは判断です 308 if (document.myform.mybox[i].checked==true) 309 s=s+document.myform.mybox[i].value+"\n"; 310 } 311 312 //購入者のラジオを選択することは判断する 313 if (document.myform.myradio[0].checked==true) 314 { 315 if(confirm("下記の商品を購入しますか？：\n"+s)==true) 316 document.write("下記の商品を購入した:<PRE>"+s+"</PRE>"); 317 } 318 else 319 { 320 if (confirm("下記の商品を販売しますか？：\n"+s)==true) 321 document.write("下記の商品を販売した:<PRE>"+s+"</PRE>"); 322 } 323 324 }