js练习V2

很多的例子是在这一个文件中练习,有的没有注释,要仔细了,以备后期复习.

①ｈｔｍｌページ：

ｈｔｍｌ

  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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 60         <label for="result"></label>
 61       <input type="text" name="result"  onchange="total()" /></td>
 62     </tr>
 63     <tr>
 64       <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;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>カード&nbsp;&nbsp;&nbsp;&nbsp;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 买家确认:&nbsp;&nbsp;
202 <input name="myradio" type="radio"  id="myradio" value="买家确认"  /><br />
203 卖家确认:&nbsp;&nbsp;
204 <input name="myradio" type="radio"  id="myradio" value="卖家确认"  /><br />
205 
206 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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 }

相关阅读:
软件质量
 LINUX
C# .net 多线程中集合数据同步
 一些常用COM接口表
 PHP、JAVA、C#、Object-C 通用的DES加密
 【C#公共帮助类】给大家分享一些加密算法（DES、HashCode、RSA、AES等）
C#中如何把int转换成两个字符的string 缺位补零
 C#中Math.Round()实现中国式四舍五入
 C# RGB与16进制颜色转换方法
 c# e语言字节集表示方式
原文地址：https://www.cnblogs.com/wocn/p/jsp_html_.html