iOS中的webView載入HTML,ioswebview載入

來源:互聯網
上載者:User

iOS中的webView載入HTML,ioswebview載入

  在日常開發中,我們為了效率會用到很多很多的WebView,比如在做某個明細頁面的時候我們返回給你的可能是一個html字串,我們就需要將當前字串展示到webView上面,所以我們對HTML標籤需要有一定的認識,下面我們來一起用html標籤和JS寫一個打地鼠遊戲,這裡我們主要講解HTML標籤的書寫,只要如何和webView適配涉及到響應式布局我們下次講解:

1、首先我們先建立一個html檔案

2 完整html標籤並且設定編碼格式為UTF-8

3 在body裡面增加十隻老鼠圖片,並且增加點擊事件,當點擊老鼠後觸發JS函數onclick="addScore(this);",代碼如下:

        <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:100px;top:200px;display:none' onclick="addScore(this);"/>        <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:200px;top:280px;display:none' onclick="addScore(this);"/>       <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:150px;top:100px;display:none' onclick="addScore(this);"/>       <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:300px;top:120px;display:none' onclick="addScore(this);"/>      <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:400px;top:200px;display:none' onclick="addScore(this);"/>          <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:600px;top:250px;display:none' onclick="addScore(this);"/>      <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:670px;top:100px;display:none' onclick="addScore(this);"/>      <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:490px;top:60px;display:none' onclick="addScore(this);"/>      <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:590px;top:30px;display:none' onclick="addScore(this);"/>      <img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:650px;top:300px;display:none' onclick="addScore(this);"/>

4 先將所有的老鼠圖片放入數組中,然後開啟定時器,每秒調用兩次該方法,並且隨機顯示八個老鼠圖片

//展示老鼠                   function showMouse(){                                              //隱藏所有的老鼠                       hideAll();                       //控制點擊次數                       times++;                       //超過20此結束點擊                       if(times>20){                           window.clearInterval(timer);                           alert("遊戲結束,得分"+score+"分");                           return;                       }                                              //擷取所有的老鼠                       var imgs=document.getElementsByTagName("img");                                              //隨機的顯示八隻老鼠                       for(var i=0;i<8;i++){                           var tem=Math.random()*10;                           tem= Math.round(tem);                           var node=imgs[tem]                                                      node.style.display="";                                                }                   }               //隱藏所有老鼠              function hideAll(){                  var imgs=document.getElementsByTagName("img");                                   for(var i=0 ;i<imgs.length;i++){                      var tem=imgs[i];                      tem.style.display="none";                                   }              }

5 每次點擊我們需要隱藏當前的圖片,並且增加分數,每點擊一次老鼠增加一分

  //增加分數            function addScore(cell){                cell.style.display="none";                score++;                document.getElementById("label").innerHTML=score+"分數";            }

6 html載入到webView中顯示

UIWebView * web=[[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 375, 667)];        NSString * path=[[NSBundle mainBundle] pathForResource:@"mouse.html" ofType:nil];    NSData * data=[NSData dataWithContentsOfFile:path];    NSString * str=[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];    web.scalesPageToFit=YES;    [web loadHTMLString:str baseURL:nil];        [self.view addSubview:web];

 

作者:傑瑞教育
出處:http://www.cnblogs.com/jerehedu/ 
著作權聲明:本文著作權歸煙台傑瑞教育科技有限公司和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文串連,否則保留追究法律責任的權利。
技術諮詢: 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.