iOS中的webView加载HTML
在日常开发中,我们为了效率会用到很多很多的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>){
window.clearInterval(timer);
alert("游戏结束,得分"+score+"分");
return;
} //获取所有的老鼠
var imgs=document.getElementsByTagName("img"); //随机的显示八只老鼠
for(var i=;i<;i++){
var tem=Math.random()*;
tem= Math.round(tem);
var node=imgs[tem] node.style.display=""; }
} //隐藏所有老鼠
function hideAll(){
var imgs=document.getElementsByTagName("img"); for(var i= ;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(, , , )]; 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/
版权声明:本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
技术咨询:

iOS中的webView加载HTML的更多相关文章
- IOS中UITableView异步加载图片的实现
本文转载至 http://blog.csdn.net/enuola/article/details/8639404 最近做一个项目,需要用到UITableView异步加载图片的例子,看到网上有一个E ...
- IOS中UIWebView停止加载
方法一: [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"about:blank" ...
- ios webview 加载含有中文的URL网页显示白屏
1. ios中的webview加载的URL不可以含有中文,解决办法说将中文字符转码, 如下: - (NSString *)URLEncodeString { NSCharacterSet *set = ...
- iOS中webView加载URL需要处理特殊字符
今天在项目中遇到webView加载URL时,因为URL中有特殊字符,导致页面无法加载,而且在- (BOOL)webView:(UIWebView )webView shouldStartLoadWit ...
- iOS控制器与视图加载方法
转载记录, 请看原文: 1. iOS中的各种加载方法(initWithNibName,loadNibNamed,initWithCoder,awakeFromNib等等)简单使用 http://w ...
- 【iOS】WebView加载HTML图片大小自适应与文章自动换行
在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑 和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制 ...
- iOS webview加载html自定义选项框选词
项目要求:webview加载html网址,内容为英文文本,需要获取文本上的单词 这个是最终效果图: 思路是先实现自定义的选项框(不带系统选项)再获取到滑选的单词: 实现的步骤: 首先是替换掉系统长按出 ...
- iOS WebView 加载本地资源(图片,文件等)
https://www.cnblogs.com/dhui69/p/5596917.html iOS WebView 加载本地资源(图片,文件等) NSString *path = [[NSBundle ...
- iOS webview加载时序和缓存问题总结
iOS webView的加载时序 UIWebView加载顺序: - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSU ...
随机推荐
- 拓扑排序 +Floyd(poj 1094)
题目:Sorting It All Out 题意:字母表前n个字母,有m组他们中的大小关系,判断n个字母是否构成唯一序列: 1.Sorted sequence determined after xxx ...
- JS初级-作用域
作用域:域:空间.范围.区域--作用:读.写 script 全局变量.全局函数 自上而下 函数 由里到外 {} 浏览器 ...
- Linux上设置nginx支持https
1.前提条件 如果系统没有自带openssl,则需要安装. 2.生成证书 # .首先,进入你想创建证书和私钥的目录,例如: cd /etc/nginx/ # .创建服务器私钥,命令会让你输入一个口令: ...
- asp.net写验证码
生成验证码与匹配验证码的服务端代码 <%@ WebHandler Language="C#" Class="ValidataeCodeHandler" % ...
- smartimageview使用与实现原理
一.从网络中获取图片的步骤 从网络中获取图片是一个耗时耗资源耗费用户流量的操作,故我们在第一次获取到网络中图片的时候会将其缓存到本地(内存或SD卡),以保证下次再需要这张图片时,可以从本地加载到. 二 ...
- Python批量修改文件名
处理语料库时,有些文件名字很不规则,为了方便处理,同义按数字顺序修改名称,主要是用到os模块: import os def RenameFiles(srcdir): #将目录下所有的文件命名为数字开头 ...
- 占位符(placeholder text)
占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本. 你可以用如下方式创建占位符: <input type=" ...
- JAVA学习博客----2015.4
这是开始写的第一篇学习博客,记录一下每个月的学习进度和掌握程度,因为这是第一次写学习博客而且已经看编程方面的书已经有几个月了,所以这一篇学习博客可能看似有些乱或者篇幅太长.从十二月的<程序员教程 ...
- ASP.NET MVC学习之模型模板篇
一.前言 如果你使用ASP.NET MVC制作后台一定会爱上它的EditorForModal.DisplayForModal和LabelForModal方法,因为这些方法可以将模型直接变成对应的标签, ...
- 在Mac OS X上用自己编译出的CoreCLR运行.NET程序
当昨天被Mac OS X上无法编译CoreCLR的问题困扰时(详见Mac OS X上尝试编译CoreCLR源代码),后来发现这个难题竟然被神人@kangaroo给解决了,连CoreCLR的微软开发人员 ...