IOS中的webView加載HTML
在日常開發(fā)中,我們?yōu)榱诵蕰玫胶芏嗪芏嗟腤ebView,比如在做某個明細頁面的時候我們返回給你的可能是一個html字符串,我們就需要將當前字符串展示到webView上面,所以我們對HTML標簽需要有一定的認識,下面我們來一起用html標簽和JS寫一個打地鼠游戲,這里我們主要講解HTML標簽的書寫,只要如何和webView適配涉及到響應式布局我們下次講解:
1、首先我們先新建一個html文件
2 完整html標簽并且設置編碼格式為UTF-8
3 在body里面增加十只老鼠圖片,并且增加點擊事件,當點擊老鼠后觸發(fā)JS函數(shù)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 先將所有的老鼠圖片放入數(shù)組中,然后開啟定時器,每秒調(diào)用兩次該方法,并且隨機顯示八個老鼠圖片
//展示老鼠 function showMouse(){ //隱藏所有的老鼠 hideAll(); //控制點擊次數(shù) times++; //超過20此結(jié)束點擊 if(times>20){ window.clearInterval(timer); alert("游戲結(jié)束,得分"+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 每次點擊我們需要隱藏當前的圖片,并且增加分數(shù),每點擊一次老鼠增加一分
//增加分數(shù) function addScore(cell){ cell.style.display="none"; score++; document.getElementById("label").innerHTML=score+"分數(shù)"; }
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];
以上所述是小編給大家介紹的IOS中的webView加載HTML的相關知識,希望對大家有所幫助。
相關文章
iOS App使用GCD導致的卡頓現(xiàn)象及解決方法
這篇文章主要給大家介紹了關于iOS App使用GCD導致的卡頓現(xiàn)象及解決方法的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2018-07-07iOS開發(fā)中UITableview控件的基本使用及性能優(yōu)化方法
這篇文章主要介紹了iOS開發(fā)中UITableview控件的基本使用及性能優(yōu)化方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-12-12ios的手勢操作之UIGestureRecognizer淺析(推薦)
本篇文章主要介紹了ios的手勢操作之UIGestureRecognizer淺析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。2016-12-12