图片异常捕获

最新推荐文章于 2023-07-18 12:26:21 发布

宿陌

最新推荐文章于 2023-07-18 12:26:21 发布

阅读量467

点赞数

分类专栏： JS 文章标签：异常处理 JavaScript HTML

本文链接：https://blog.csdn.net/qq_37860994/article/details/80069079

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

异常处理

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>异常处理</title>
  <!--做一个搜索页的用户界面，使用图片作为按钮，鼠标移进移出时按钮状态发生改变（切换图片），并且关键字文本框的内容自动被选中{select()}-->
   <!--想法：增加一个Switch()用于选择效果一和效果二。效果二：鼠标移动到图片上时焦点移到text（使用onMouseover()和focus。）-->
 </head>
 <body>
  <script>
  //1.鼠标停留在图片上时，切换图片并且选择文本框中的内容
  function btnSearch_MouseMove(){
      try//因为更换或加载图片可能出错，因此将代码放在try块中
      { //获取图片和文本框
        var btnSearch=document.getElementById("BtnSearch");
        var SchTxt=document.getElementById("SearchTXT");
        var oriPicSrc=btnSearch.src;//保存原来的图片
        btnSearch.src="icon.png";//更换图片
        SchTxt.select();//选择文本框中的的文字
      }
      catch (e)//捕捉异常
      {
        btnSearch.src=oriPicSrc;//更新失败换上原来的图片
      }

  }
  //2.鼠标停留在图片上时，切换图片并且焦点在文本框上。
   function btnSearch_MouseMove2(){
      try
      {
        var btnSearch=document.getElementById("BtnSearch");
        var SchTxt=document.getElementById("SearchTXT");
        var oriPicSrc=btnSearch.src;
        btnSearch.src="icon.png";
        SchTxt.select();//焦点移动到文本框上
      }
      catch (e)
      {
        btnSearch.src=oriPicSrc;
      }

  }
  //鼠标移出图片，恢复成最初的图
  function btnSearch_MouseOut(){
      try
      {
        var btnSearch=document.getElementById("BtnSearch");
        var SchTxt=document.getElementById("SearchTXT");
        var oriPicSrc=btnSearch.src;
        btnSearch.src="cloud.png";
      }
      catch (e)
      {
       btnSearch.src=oriPicSrc;
      }
  }
  function A(){ 
  //var a=document.getElementById("Choice");
  // switch(a.value)
  if(Choice.value==1||Choice.value==2){//判断输入的值以选择1或2
  switch(Choice.value){
      case "1"://这里应该写的是value值 是字符串 要加双引号
         return btnSearch_MouseMove();
         break;
      case "2"://这里应该写的是value值 是字符串 要加双引号
         return btnSearch_MouseMove2();
         break;
      }
    }
    else Choice.value="";//输入的值不是1或2，清空文本框
  }
  </script>
  请输入1或2:<input id="Choice" type="text" />
  <div style="border:#cccccc 1px solid;left:153px;width:250px;height:74px;position:absolute;top:66px;background-color:#ccffff;">
  <img id="BtnSearch" src="cloud.png" style="width:40px;height:40px;left:184px;position:absolute;top:21px;<!--图片框-->"
       onmouseout="return btnSearch_MouseOut()" onmouseover="return A()"/>
  <input type="text" id="SearchTXT" style="height:14px;left:25px;position:absolute;top:29px;<!--按钮-->" value="搜索关键词"/>
  </div>
 </body>
</html>