js代码

js实现web网页版台球游戏

爱⌒轻易说出口 提交于 2020-02-10 22:56:27
js桌球小游戏在线试玩地址: http://keleyi.com/game/13/ 游戏截图: 完整代码,保存到html文件可以试玩: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js实现web页面台球游戏特效 - 柯乐义</title> 6 <link href="http://keleyi.com/game/13/css/keleyi.css" rel="stylesheet" type="text/css"> 7 <script type="text/javascript" src="http://keleyi.com/game/13/js/keleyi.js"></script> 8 </head> 9 <body> 10 <div id="table"> 11 <div id="scoreBoard"><

js 一些知识点

时光毁灭记忆、已成空白 提交于 2020-02-10 22:28:58
1,什么是命名空间,变量污染,变量声明提升?如何检查一段代码执行后是否声明了全局变量? 2,隐式转换的种种规则 3,关于对象,对象的属性可能有哪些特性(attribute)?什么是原型链?如何检测某一属性是在对象中还是原型链中?如何检测是否是普通对象或空对象?写一个工厂模式?(工厂模式也有很多细节,具体可以参考《javascript模式》一书, 不是 《javascript设计模式》) 4,变量类型检测、特性检测以及异常避免 5,setTimeout的特性 6,数组几个API的手工实现 7,事件 8,正则表达式,至少要明白$1和\1的意思和几个API的用法。 DOM操作 1,实现一些API如getElementsByClass(有很多细节,参见司徒正美的博客) 2,各种宽度高度(clientHeight之类)的含义及各浏览器之间的差异性 3,实现一个带回调函数的插入DOM节点API(须考虑script标签、documentFragment) CSS操作 1,如何操作CSS的伪类和伪元素? 2,如何检测改浏览器是否支持某个CSS3的特性? ajax操作 1,get和post的区别及使用要点 2,http协议,包括格式、状态码,cookie操作 3,跨域 4,转换JSON的几种方式 来源: https://www.cnblogs.com/asmg/p/3573870.html

js基础知识

别等时光非礼了梦想. 提交于 2020-02-10 19:58:27
2.10 1.js常见的三种输出语句 console.log() 在浏览器的控制台输出 Alert() 弹出一个对话框 document.write()在页面输出 2.script标签是否可以在html中任意放置。 不可以,跟内容的执行顺序有关。如果想任意放置script标签,需要在里面写window.onload. Html中内容的执行顺序 1.解析html结构 --浏览器的一个解析器 解析标签 从上到下 2.引入样式文件css文件和脚本文件js文件 3.解析和执行脚本代码 ----浏览器中的js引擎执行的 4.加载图片(视频和音频)资源 5.加载css的样式代码 6.执行window.onload操作 所有文档加载完成之后再执行 跟html中内容的加载顺序有关。 Window.onload的优势 1.将里面的代码放在最后执行 2.形成私有作用域保护里面的变量不受外部影响 3.每个js文件只能有一个window.onload 最后面的会覆盖掉前面的。 三 web前端的三个层 (三件套/三剑客) 1.html 结构层 2.css 表现层 3.js 行为层 开发过程中要保持三者分离。尽量不要耦合在一起。 这叫结构和行为耦合,避免这种写法。 阻止超链接刷新页面。 四 1.变量的存储方式。 2.作用域的问题 3.函数的问题 4.数据类型 1)变量的存储方式 浏览器在执行js代码的过程中

js阻止事件冒泡

若如初见. 提交于 2020-02-10 09:02:27
<body>  <form id="form1" runat="server">    <div id="divOne" onclick="alert('我是最外层');">      <div id="divTwo" onclick="alert('我是中间层!')">        <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com"onclick="alert('我是最里层!')">点击我</a>      </div>    </div>  </form></body> 比如上面这个页面, 分为三层:divOne是第外层,divTwo中间层,hr_three是最里层; 他们都有各自的click事件,最里层a标签还有href属性。 运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层 ---->然后再链接到百度. 这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。 事件冒泡过程(以标签ID表示):hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。 如何来阻止? 1.event.stopPropagation(); <script type="text

JS中5种经典继承方式

五迷三道 提交于 2020-02-10 08:40:44
继承 JS中继承的概念: 通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy 为什么要使用继承? 有些对象会有方法(动作、行为),而这些方法都是函数,如果把这些方法和函数都放在构造函数中声明就会导致内存的浪费 function Person(){ this.say=function(){ console.log("你好") } } var p1=new Person(); var p2=new Person(); console.log(p1.say === p2.say); //false 继承的第一种方式:原型链继承1 Person.prototype.say=function(){ console.log("你好") } 缺点:添加1、2个方法无所谓,但是如果方法很多会导致过多的代码冗余 继承的第二种方式:原型链继承2 Person.prototype = { //切记不能忘记 constructor:Person, say:function(){ console.log("你好"); }, run:function(){ console.log("正在进行百米冲刺"); } } 注意点: a、一般情况下,应该先改变原型对象,再创建对象 b、一般情况下,对于新原型

js创建对象

荒凉一梦 提交于 2020-02-10 07:40:44
说到创建对象,我刚开始想到的就是构造函数创建和对象字面量创建,但今天看了书之后,发现创建对象不止这么简单,以下是我的看书后的理解和一些疑惑,在此纪录: //构造函数 var obj1=new Object(); //对象字面量 var obj={ name:"ellen", age:"21" } 构造函数和对象字面量是常用的方法,但缺点是“使用同一个接口创建很多对象,会产生大量重复代码”(这句话感觉没理解清楚,现在理解为如果要创建几个相似对象,他们都有name,age,job,如果用这两种方法,会一直写name,age,job,100个对象就要写100次...)。 工厂模式 抽象了创建具体对象的过程,用函数来封装以特定接口创建对象 function createPerson(name,age,job) { var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); } return o; } var person1=createPerson("kun",33,"老师"); 这样创建一个对象时,就已经带有name,age,job属性和sayName方法了。解决了之前会造成对个相似对象问题。但没有“解决识别问 构造函数模式 除了像Object

OC与JS的交互(iOS与H5混编)

给你一囗甜甜゛ 提交于 2020-02-10 07:05:47
大神总结WKWebView的坑: https://mp.weixin.qq.com/s/rhYKLIbXOsUJC_n6dt9UfA 在开发过程中,经常会出现需要iOS移动端与H5混编的使用场景。 iOS中加载html网页, 可以使用UIWebView或WKWebView. 本篇博客将介绍两种控件使用过程中如何实现OC与JS的交互。 UIWebView delegate 协议方法 //网页即将开始加载 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; //网页开始加载 - (void)webViewDidStartLoad:(UIWebView *)webView; //网页加载完成 - (void)webViewDidFinishLoad:(UIWebView *)webView; //网页加载失败 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error; //UIWebView自带了一个方法, 可以直接调用JS代码(转化为string类型的js代码)

Android之WebView学习

杀马特。学长 韩版系。学妹 提交于 2020-02-10 04:53:40
WebView常用方法 WebSettings 在使用WebView前我们都要进行相关的配置,常见的操作如下: WebSettings settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true); //支持javascript settings.setUseWideViewPort(true); //设置webview推荐使用的窗口,使html界面自适应屏幕 settings.setLoadWithOverviewMode(true); //缩放至屏幕的大小 settings.setAllowFileAccess(true); //设置可以访问文件 // settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM); //设置中等像素密度,medium=160dpi settings.setSupportZoom(true); //设置支持缩放 settings.setLoadsImagesAutomatically(true); //设置自动加载图片 // settings.setBlockNetworkImage(true); //设置网页在加载的时候暂时不加载图片 // settings.setAppCachePath(""); //设置缓存路径

JS设计模式(14)适配器模式

拟墨画扇 提交于 2020-02-10 04:45:34
什么是适配器模式? 定义: 将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 主要解决: 主要解决在软件系统中,常常要将一些"现存的对象"放到新的环境中,而新环境要求的接口是现对象不能满足的。 何时使用: 1、系统需要使用现有的类,而此类的接口不符合系统的需要。 2、想要建立一个可以重复使用的类,用于与一些彼此之间没有太大关联的一些类,包括一些可能在将来引进的类一起工作,这些源类不一定有一致的接口。 3、通过接口转换,将一个类插入另一个类系中。(比如老虎和飞禽,现在多了一个飞虎,在不增加实体的需求下,增加一个适配器,在里面包容一个虎对象,实现飞的接口。) 如何解决: 继承或依赖(推荐)。 关键代码: 适配器继承或依赖已有的对象,实现想要的目标接口。 应用实例: 1、美国电器 110V,中国 220V,就要有一个适配器将 110V 转化为 220V。 2、JAVA JDK 1.1 提供了 Enumeration 接口,而在 1.2 中提供了 Iterator 接口,想要使用 1.2 的 JDK,则要将以前系统的 Enumeration 接口转化为 Iterator 接口,这时就需要适配器模式。 3、在 LINUX 上运行 WINDOWS 程序。 4、JAVA 中的 jdbc。 优点: 1

android js 互相调用

房东的猫 提交于 2020-02-10 04:05:32
代码地址如下: http://www.demodashi.com/demo/13107.html android js 互相调用 第二版 支持js匿名函数接收 支持js json对象接收 支持js函数返回值获取 通过注解注入js方法 优化第一版的反射注入方式,采用注解处理器编译时生成注入代码,提高运行效率 加入简单的 webview 预加载功能 实现原理 通过注解处理器实现js代码自动生成 创建WebViewChromeClient重写 onProgress方法当进度大于30%的时候执行js代码注入,js代码必须注入成功才能调用 js代码生成逻辑 /** * 注解处理器 */ @AutoService(Processor.class) public class InjectProcessor extends AbstractProcessor { /** * 文件相关的辅助类 */ private Filer mFiler; /** * 元素相关的辅助类 */ private Elements mElementUtils; /** * 日志相关的辅助类 */ private Messager mMessager; //返回注解处理器可处理的注解操作 //@Override public Set<String> getSupportedOptions() { // return