很多的例子是在这一个文件中练习,有的没有注释,要仔细了,以备后期复习.
①ｈｔｍｌページ：
ｈｔｍｌ
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; width: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 }