iOS の webView は HTML_html/css_WEB-ITnose をロードします-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-21 08:57:56

オリジナル

900 人が閲覧しました

日常の開発では、効率化のために多くの 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='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 最初にすべてのマウスの画像を配列に入れ、次にタイマーを開始し、このメソッドを 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<imgs.length;i++){                      var tem=imgs[i];                      tem.style.display="none";                                   }              }

ログイン後にコピー

5 クリックするたびに、現在の画像を非表示にしてスコアを増やす必要があります。マウスをクリックするたびに 1 ポイントが追加されます。

  //增加分数            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/

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

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

技術相談: