In the daily development, we will use a lot of WebView for efficiency , for example, when we make a detail page, we return to you is an HTML string, we need to display the current string on the WebView, so we HTML tags need to have a certain understanding, below we come together with HTML tags and js to write a game , here we mainly explain the HTML tag writing, as long as how and WebView adaptation involves the response layout of our next explanation:
1, first we first create a new HTML file
2 full HTML tags and set the encoding format to UTF-8
3 Add 10 mouse pictures inside the body, and increase the Click event, when the mouse click triggers the JS function onclick= "addscore (this);", the code is as follows:
<imgsrc= ' 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);"/> <imgsrc= ' 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);"/> <imgsrc= ' 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);"/> <imgsrc= ' 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);"/> <imgsrc= ' 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);"/> <imgsrc= ' 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);"/> <imgsrc= ' 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);"/> <imgsrc= ' 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);"/> <imgsrc= ' 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);"/> <imgsrc= ' 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 first put all the mouse pictures into the array, and then turn on the timer, twice a second to call the method, and randomly display eight mouse pictures
//Show Micefunction Showmouse () {//Hide all the miceHideall (); //control the number of clickstimes++; //more than 20 this end click if(times> -) {window.clearinterval (timer); Alert ("game over, score"+score+"points"); return; } //get all the micevar imgs=document.getelementsbytagname ("img"); //randomly showing eight mice. for(Var i=0;i<8; i++) {var tem=math.random () *Ten; TEM=Math.Round (TEM); var node=Imgs[tem] Node.style.display=""; } } //Hide all the micefunction Hideall () {var IMGs=document.getelementsbytagname ("img"); for(Var i=0; i) {var tem=Imgs[i]; Tem.style.display="None"; } }
5 Each Click we need to hide the current picture, and increase the score, every time you click a mouse to add a point
// Add score function Addscore (cell) { Cell.style.display="none"; Score+ +; document.getElementById ("label"). innerhtml=score+" Score "; }
6 html loaded into webview display
UIWebView * Web=[[uiwebview alloc] Initwithframe:cgrectmake (00375667)]; * Path=[[nsbundle Mainbundle] Pathforresource:@ "mouse.html" Oftype:nil]; * Data=[NSData Datawithcontentsoffile:path]; * Str=[[NSString alloc] Initwithdata:data encoding:nsutf8stringencoding]; Web.scalespagetofit=YES; [Web Loadhtmlstring:str Baseurl:nil]; [Self.view Addsubview:web];
Jerry Education
Source:http://www.cnblogs.com/jerehedu/
Copyright Notice: The copyright of this article belongs to cigarettes DeskJerry EducationSection Technology Co., Ltd. and blog Park are shared, welcome reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.
Technical Consultation:
WebView Loading HTML in iOS