动态效果制作

下面是一些练习的代码：
 
练习一: 如下文本框,当输入内容后,默认的提示消失,文字变为黑色;
如果没有输入内容,则文字还原为灰色,提示保留

吃饭 睡觉 打豆豆 音乐 游戏
  
  <!DOCTYPE html>
  <!-- saved from url=(0074)http://localhost:63342/%E7%A8%8B%E5%86%AC/%E7%BB%83%E4%B9%A0/lianxi27.html -->
  <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
  <title>练习</title>
  </head>
  <body>
  <div>练习一:
  如下文本框,当输入内容后,默认的提示消失,文字变为黑色;<br>
  如果没有输入内容,则文字还原为灰色,提示保留
  </div>
   
   
  <input type="text" id="myinput" value="请输入你的姓名" style="color: gray;">
  <hr>
  <div>
  <input type="checkbox">吃饭
  <input type="checkbox">睡觉
  <input type="checkbox">打豆豆
  <input type="checkbox">音乐
  <input type="checkbox">游戏
  </div>
  <div><input type="button" value="全选">
  <input type="button" value="全不选">
  <input type="button" value="反选">
  </div>
   
   
   
  <script>
  function addListener(element,e,fn){
  if(element.addEventListener){
  element.addEventListener(e,fn,false);
  } else {
  element.attachEvent("on" + e,fn);
  }
  }
  var myinput = document.getElementById("myinput");
  addListener(myinput,"click",function(){
  myinput.value = "";
  myinput.style.color="black";
  })
  addListener(myinput,"blur",function(){
  myinput.value = "请输入您的姓名";
  myinput.style.color="gray";
  })
  </script>
  </body></html>

posted on 2017-04-04 19:30  小小的西红柿  阅读(260)  评论(0)    收藏  举报

导航