iOS の webView は HTML_html/css_WEB-ITnose をロードします

日常の開発では、効率化のために多くの WebView を使用します。たとえば、詳細ページを作成する場合、返されるのは HTML 文字列である場合があるため、現在の文字列が表示されます。 HTML タグを理解する必要があるので、HTML タグと JS を使ってモグラたたきゲームを書いてみましょう。ここでは主に HTML タグの記述と、WebView への対応方法について説明します。レスポンシブ レイアウトについては次回説明します。

1. まず、新しい HTML ファイルを作成します

2 HTML タグとエンコーディングを設定します。形式は UTF-8 です。

3 本文にマウスの絵を 10 個追加し、マウスがクリックされたときの JS 関数 onclick="addScore( this);" がトリガーされます。 コードは次のとおりです:

        <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >        <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >       <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >       <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >      <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >          <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >      <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >      <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >      <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >      <img  src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg'   style="max-width:90%" onclick="addScore(this);"/ alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" >

4 最初にすべてのマウスの画像を配列に入れ、次にタイマーを開始し、このメソッドを 1 秒ごとに 2 回呼び出し、8 つのマウスの画像をランダムに表示します

//展示老鼠                   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<img s.length;i++){                      var tem=imgs[i];                      tem.style.display="none";                                   }              }</pre alt="iOS の webView は HTML_html/css_WEB-ITnose をロードします" > <p>5 クリックするたびに、現在の画像を非表示にしてスコアを増やす必要があります。マウスをクリックするたびに 1 ポイントが追加されます。</p> <pre class='brush:php;toolbar:false;'>  //增加分数            function addScore(cell){                cell.style.display="none";                score++;                document.getElementById("label").innerHTML=score+"分数";            }

6 HTML がロードされます。

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];

著者: Jerry Education

出典: http://www.cnblogs.com/jerehedu/

著作権表示:この記事は煙台ジェレ教育

テクノロジー株式会社に属します。ブログパークと共有されており、転載は歓迎されていますが、この声明は著者の同意なしに保持されなければならず、原文へのリンクを以下に提供する必要があります。記事ページ上で明確な立場を表明していない場合、当社は法的責任を追及する権利を留保します。

技術相談: