前端效果——持续更新。。。

1.按下Enter键，改变下面文字 颜色

实现如下：

//HTML部分    <input type="text" id="txt1" value="" placeholder="商品名称" /><br/>    <span id="sp1">hello</span>//JS部分<script src="jquery.js"></script><script type="text/javascript"> $("#txt1").keydown(function(event){if((event.keycode||event.which)==13)    $("#sp1").css({color:'red'}); });</script>

View Code

 2.全选&取消全选

 

实现如下:

//Html部分<input type="checkbox" id="ckAll"/>全选<br/>    <input type="checkbox" name="opt"/>选项一<br/>    <input type="checkbox" name="opt"/>选项二<br/>    <input type="checkbox" name="opt"/>选项三//JS部分<script src="jquery.js"></script><script type="text/javascript">var n=0;  $("#ckAll").click(function(){      if (n==0) {      $("input[name='opt']").prop("checked",true);      n=1;          }else{          $("input[name='opt']").prop("checked",false);      n=0;      }        });</script>

View Code

3. 首次进入页面提示输入内容

 

实现如下：

<script> var rec=window.prompt("请输入用户名："); alert(rec);</script>

View Code

 4.手机页面限定

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">//控制兼容性 <meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">//限定用户扩大和自动缩放屏幕

View Code