用户名变灰
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <style type="text/css"> 6 .myClass{ 7 color:#c0c0c0 8 } 9 </style> 10 <script type="text/javascript" src="../js/jquery-1.6.js"></script></head> 11 <body> 12 <table border="1" align="center"> 13 <tr> 14 <th>用户名</th> 15 <td> 16 <input type="text" value="输入用户名"/> 17 </td> 18 </tr> 19 </table> 20 <script type="text/javascript"> 21 $(function(){ 22 $("input").addClass("myClass"); 23 $("input").focus(function(){ 24 $(this).removeClass("myClass"); 25 $(this).val(""); 26 }) 27 }); 28 </script> 29 </body> 30 </html>
坦克上下左右移动
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 6 </head> 7 <body> 8 <img src="../images/zgl.jpg"/> 9 <script type="text/javascript"> 10 //初始化 11 $(function(){ 12 //定位图片 13 var $img = $("img"); 14 //将图片定位于指定的位置 15 $img.offset({top:200,left:400}); 16 $img.width(100); 17 $img.height(200); 18 //为图片添加事件 19 $(document).keydown(function(){ 20 //获取按钮的code码 21 var code = event.keyCode; 22 //判断 23 if(code == 38){//上 24 $img.offset({top:y-=15}); 25 }else if(code == 40){//下 26 $img.offset({top:y+=15}); 27 }else if(code == 37 ){//左 28 $img.offset({left:x-=15}); 29 }else if(code == 39){//右 30 $img.offset({left:x+=15}); 31 } 32 }); 33 }); 34 //全局变量 35 var y = 200; 36 var x = 400; 37 </script> 38 </body> 39 </html>