js代码 | 易学教程

JS缓冲运动案例

阅读更多关于 JS缓冲运动案例

点击“向右”按钮，红色的#red区块开始向右缓冲运动，抵达到黑色竖线位置自动停止，再次点击“向右”#red区块也不会再运动。点击“向左”按钮，红色的#red区块开始向左缓冲运动，抵达到蓝色竖线位置自动停止，再次点击“向左”#red区块也不会再运动。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS小案例：缓冲运动</title> <style> #red { width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 200px; } .black { position: absolute; width: 1px; height: 200px; left: 900px; background: black; top: 50px; } .blue { position: absolute; width: 1px; height: 200px; left: 200px; background: blue; top: 50px; } </style> <script> //补充代码 </script> </head> <body> <input type='button' value

js预解析

阅读更多关于 js预解析

js预解析 1. 定义预解析：在当前作用域下,js运行之前，会把带有var和function关键字的事先声明，并在内存中安排好。然后再从上到下执行js语句。预解析只会发生在通过var定义的变量和function上。 2. var 通过var关键字定义的变量进行预解析的时候:都是声明declare，不管它有没有赋值，都会赋值undefined。 alert(a); //undefined var a = 1; alert(b); //undefined var b = function(){ } alert(c); //undefined var c; 只要是通过var定义的，不管是变量，还是函数，都是先赋值undefined，如果是变量，也不管变量有没有赋值，在预解析阶段，都是会被赋值为undefined。 3. function function进行预解析的时候，不仅是声明而且还定义（define）了，但是它存储的数据的那个空间里面存储的是代码是字符串，没有任何意义。 alert(a); //弹出的是下面的function function a(){ 　　alert("预解析function") } 注意这种情况定义一个函数想要立即执行，写成如下形式是不可行的，在预解释的时候，它把它分解成两部分来对待，第一部分是fn函数，而第二部分是(),一个匿名函数，执行时会报错

js keyup、keypress和keydown事件详解

阅读更多关于 js keyup、keypress和keydown事件详解

js keyup、keypress和keydown事件详解 js keyup、keypress和keydown事件都是有关于键盘的事件当一个按键被pressed 或released在每一个现代浏览器中，都可能有三种客户端事件。 keydown event keypress event keyup event keydown事件发生在键盘的键被按下的时候，接下来触发 keypress事件。 keyup 事件在按键被释放的时候触发。这三个事件在页面中的使用方法如下例： <input id="testkeyevent" name="testkeyevent" onKeyUp ="keyup()" /> <input id="testkeyevent" name="testkeyevent" onkeypress ="keypress()" /> <input id="testkeyevent" name="testkeyevent" onkeydown ="keydown()" /> 对应的js函数： function keyup(){ ...} function keypress(){ ...} function keydown(){ ...} 注意: KeyDown触发后，不一定触发KeyUp，当KeyDown 按下后，拖动鼠标，那么将不会触发KeyUp事件。

Js深度克隆解析

阅读更多关于 Js深度克隆解析

Js克隆（clone），就是数据拷贝，包括基础类型的数据和引用类型的数据，而深度克隆（deepClone）就是针对引用类型，如数组和对象。两种拷贝的区别在于：浅拷贝时，拷贝出的对象指向原对象的地址，当其值发生改变时，原对象的值也发生改变；　　　　　　　　深度拷贝，拷贝出的对象指向一个新的地址，当其值发生改变时，原对象的值不受影响。下面列出深度拷贝的代码及其详细注释： var obj = {//待拷贝的对象 name:"abc", age:"123", card:['visa','master'], wife:{ name:"bcd", son:{ name:"aaa" } }, a:function(){} } function deepclone(origin , target){ var target = target || {}, tostr = Object.prototype.toString,//使用Object.prototype.toString.call方法进行对象和数组的区分，所以先将其进行存储以便使用 arr = '[object Array]'; for(var prop in origin){ if(origin.hasOwnProperty(prop)){//防止拷贝的对象从原对象的原型上取值 if(origin[prop] !== "null"

JS弹出窗口Window.Open详解

阅读更多关于 JS弹出窗口Window.Open详解

一、window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二、基本语法： window.open(pageURL,name,parameters) 其中： pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 三、示例： <SCRIPT>  </SCRIPT> 脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。请对照。上例中涉及的为常用的几个参数，除此以外还有很多其他参数，请见四。四、各项参数其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。参数 | 取值范围 | 说明 alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised

405 webpack 具体使用

阅读更多关于 405 webpack 具体使用

webpack 使用步骤 (最新版) 一、webpack 第一阶段命名初始化阶段项目名不能有汉字，不能取名叫 webpack 1、创建项目名称，并生成 package.json ，命令 : npm init -y 2、安装 : npm i -D webpack webpack-cli webpack : 是 webpack 工具的核心包 webpack-cli : 提供了一些在终端中使用的命令 -D(--save-dev) : 表示项目开发期间的依赖，也就是 : 线上代码中用不到这些包了 3、创建一个 main.js 文件 console.log('我就要被打包了，哦也'); 4、在 package.json 的 scripts 中，添加脚本 // webpack 是 webpack-cli 中提供的命令，用来实现打包的 // ./main.js 入口文件，要打包哪个文件 "scripts": { "build": "webpack main.js" }， 5、运行 : npm run build 6、设置开发状态 : mode "build" : "webpack ./main.js --mode development" // WARNING in configuration // The 'mode' option has not been set， webpack

跨域详解

阅读更多关于跨域详解

https://segmentfault.com/a/1190000011145364 什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。什么是同源策略？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送常见跨域场景 URL 说明是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js

移动h5开发资源整理

阅读更多关于移动h5开发资源整理

移动h5开发资源整理这2年来，移动h5开发逐渐成为一种主流，也不断趋向于成熟。硬件和浏览器的不断更新，曾经的浏览器兼容也不再是开发者的噩梦。接触h5开发一年多，从最初的新手到现在，陆陆续续遇到过很多坑。这里把想到的一些经验与资源罗列出来，给刚入h5的同学带来一些帮助。该文章会持续更新。内容比较多，可以点击下方『悬浮菜单按钮』进行选择需要阅读的章节。基础知识新手建议看看下面的在线教程。 html,css,JavaScript,jQuery在线教程： w3school在线教程： http://www.w3school.com.cn/ 菜鸟教程： http://www.runoob.com/ 参考手册： jQuery： http://hemin.cn/jq/ css： http://css.doyoe.com/ h5页面基本组成 meta viewport模板以上支持响应式布局设计。有用的js类库 jQuery 这个必须学会的。在线教程： http://www.w3school.com.cn/jquery/index.asp 在线手册： http://hemin.cn/jq/ Zepto Zepto和jQuery基本是一样的，只是由于其体积更小，适合移动端使用。如果你会用jquery，那么你也会用zepto。注意，zepto并没有实现jQuery的所有功能

js实现选中文字分享功能

阅读更多关于 js实现选中文字分享功能

<!doctype html> <html> <head> <meta charset="utf-8"> <title>分享</title> <style> ::selection { background-color:#FDC4ED; } ::-webkit-selection { background-color:#FDC4ED; } ::-moz-selection { background-color:#FDC4ED; } #box { width:600px; margin:20px auto; } #share { width:26px; height:26px; position:absolute; cursor:pointer; display:none; } </style> </head> <body> <div id="box"> <h2>CSS布局的未来</h2> <p>大家都知道，css有着奇妙的特性，然而让人失望的是，css对基本页面布局上的支持有所欠缺。但是这种情况正在得到改变，更多的动态页面正是由css所支持的，正如peter gasston所说的。</p> <p>在这里，我能够保证在数年之后，css3必定能够引领潮流。一揽子的前端工具正在应运而生，方便为我们带来rounded corners圆角，gradients渐变，opacity透明度

原生JS实现栈结构

阅读更多关于原生JS实现栈结构

1. 前言栈，是一种遵从后进先出(LIFO,Later-In-First-Out)原则的有序集合。新添加的元素都保存在栈的一端，称作栈顶，另一端叫做栈底。在栈中，新元素都靠近栈顶，旧元素都靠近栈底。 2. 功能说明 push(value):添加一个新元素到栈顶 pop():移除栈顶的元素，同时返回该元素 peek():获取栈顶的元素 isEmpty():判断栈是否为空。是返回true,否返回fallse clear():清空栈里的元素 size():获取栈里元素的个数 3. 代码实现首先，先创建一个类表示栈，并且初始化一个空数组，用来保存栈里的元素 class Stack { constructor() { this.items = []; }; } 接着，在这个栈类中实现所需要的功能： class Stack { constructor() { this.items = []; }; push(value) { this.items.push(value); }; pop() { return this.items.pop(); }; peek() { return this.items[this.items.length - 1]; }; isEmpty() { return this.items.length === 0; }; clear() { return this

订阅 js代码