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

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