js | 易学教程

禁止网页中的图片或文本被选中

阅读更多关于禁止网页中的图片或文本被选中

背景由于我最近在开发一个互动小游戏，碰到一个情况必须要用 img 标签来实现，平时我都是用 div 再给它背景的方式实现的。（为什么小游戏还要用 dom ？用游戏引擎不行吗？我太菜了，不会游戏引擎，只能用原生js和jQuery实现了，反正我接触到的游戏都不是很复杂，用css实现一些动效还挺简单的）。遇到的问题其实我一开始就是用 img 来添加物品到场景中的，后来测试发现图片会被选中，并且某些浏览器甚至会打开新页面，当时我为了避开这个问题，改成了 div +背景的方式，现在我遇到了麻烦，只能用 img 才能简单点。所以我就上网找如何解决这样的问题。最粗暴的解决方法 // jquery $ ( document . body ) . on ( 'mousedown' , e => { e . preventDefault ( ) } ) 同时，这个也是最简单的解决办法，可以禁止所有的图片、文字选中和元素的拖动，对于我制作的小游戏都十分友好。如果需要更加精细的控制，可以修改 document.body 为其他的选择器即可。利用css禁止文字、图片选中如果只是想禁止选中效果，而保留拖拽等其他效果，也是可以的。只需添加一些 css 代码即可。 /* 禁止所有的img被选中, 文本也是一样 */ img { user-select : none ; } 禁止图片被拖拽

js缓慢滑块

阅读更多关于 js缓慢滑块

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;} </style> <script> window.onscroll=function() { var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //alert(document.documentElement.clientHeight); //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px'; //alert(document.documentElement.clientHeight); //document.title=oDiv.offsetHeight; //alert(oDiv.offsetHeight); //alert(document

JS中let、var、const的区别

阅读更多关于 JS中let、var、const的区别

先看let和var： 1. console.log(a); // undefined var a = 3; console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization let a = 3; 在当前代码执行之前，首先会把所有带var关键字的进行声明(带function关键字的也会提前声明并且定义)，即所谓的变量提升，let则不存在这种情况。 ps：项目中创建函数，一般都是基于函数表达式来实现，这样防止其提前变量提升，如： let fn = function () {}; 2. var x = 3; console.log(window.x); // 3 let y = 3; console.log(window.y); // undefined 用var进行全局变量声明的时候，也会给全局对象（浏览器中即window）增加一个对应的属性；但是用let声明的变量不存在这个特点。仅限于全局变量创建时有这个特点，属于私有的执行上下文中创建的私有变量没有这个特点。 function fn() { var x = 1; y = 2; console.log(fn.x); // undefined console.log(fn.y); // undefined } fn();

Javascript中判断 Undefined 还是 Null 的方法

阅读更多关于 Javascript中判断 Undefined 还是 Null 的方法

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。对象只有被定义才有可能为 null，否则为 undefined。如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。错误的使用方式： if (myObj !== null && typeof myObj !== "undefined") 正确的方式是我们需要先使用 typeof 来检测对象是否已定义： if (typeof myObj !== "undefined" && myObj !== null) 出处: https://www.runoob.com/js/js-mistakes.html 来源： https://www.cnblogs.com/mq0036/p/12294765.html

js动画最佳实现——requestAnimationFrame

阅读更多关于 js动画最佳实现——requestAnimationFrame

我们经常用setInterval来实现动画，其实这种做法不是太好，因为不同浏览器的刷新频率也不一样（一般认为设置16为最佳,按每秒60帧算，1000/60≈16.67） var dis = 0,timer = 0; clearInterval(timer); timer = setInterval(function(){ div.style.left = ++dis; 　　if(dis>=50) clearInterval(timer) },16) 实现js动画最好的是requestAnimationFrame: requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点： 1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。 2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。 var dis =0; function animation(){ requestAnimationFrame(function(){ div.style.left = ++dis; if(disx<50)

初学require.js

阅读更多关于初学require.js

　　引入require.js，可以解决的问题：（1）实现js文件的异步加载，避免网页失去响应；（2）管理模板之间的依赖性，便于代码的编写和维护。　　它的模块管理遵循AMD规范（Asynchronous Module Definition - 异步加载模块规范）；所谓AMD规范，就是为了解决模块化编程带来的代码加载先后顺序问题，以及常规为解决该阻塞问题方式带来的各种附加问题。　　核心是通过define方法将无序混乱代码分割为有序的模块，通过require方法实现代码的模块加载。一、require.js的加载　　把从官网下载的文件放在js目录下，按如下方式引用： <script src="js/require.js"></script> 　　加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样： <script src="js/require.js" defer async="true" ></script> 　　加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了： <script src="js/require.js" data-main="js/main"></script> 　　data

如何用原生js实现放大镜特效

阅读更多关于如何用原生js实现放大镜特效

<!DOCTYPE html> <html> <head> <meta charset=" UTF-8"> <title> </title> <style type=" text/css"> #box{ width: 1000px; height: 400px; border: 1px solid salmon; position: relative; margin: 50px auto; } #small{ width: 350px; height: 350px; position: absolute; border: 1px solid slateblue; } #big{ width: 350px; height: 350px; position: absolute; border: 1px solid slateblue; left: 352px; overflow: hidden; display: none; } #mark{ width: 153px; height: 153px; background-color: rgba(0,0,0,0.5); position: absolute; display: none; } .limg{ position: absolute; } </style> </head> <body> <div id=" box"> <div

requireJS 从概念到实战

阅读更多关于 requireJS 从概念到实战

原文转至:http://www.cnblogs.com/yingzi1028/p/6693852.html 小颖目前所在的公司在用require.js，小颖一直说要写个小demo，今天抽空把自己写的小demo分享出来，希望对初学者有一些帮助，嘻嘻学习资料： CSDN上的一篇文章：使用RequireJS优化Web应用前端阮一峰老师的网络日志： Javascript模块化编程（三）：require.js的用法卷柏的花期的随笔： requireJS 从概念到实战 demo目录：小颖就不在自己博客里卖弄了，像：为什么要用require.js？、require.js的加载、主模块的写法等小颖就不在我的博客里面写了，详细的大家请移步到：阮一峰老师的网络日志： Javascript模块化编程（三）：require.js的用法中去看看。小颖就主要给大家分享下小颖理解的 require.js模块的加载和AMD模块的写法在看小颖写的demo之前大家先看下阮一峰老师的网络日志： Javascript模块化编程（三）：require.js的用法中模块的加载和AMD模块的写法的详解：模块的加载：上一节最后的示例中，主模块的依赖模块是['jquery', 'underscore', 'backbone']。默认情况下，require.js假定这三个模块与main.js在同一个目录

js原生的forEach()和map()以及jquery中的each（）和map()他们4者的联系和区别

阅读更多关于 js原生的forEach()和map()以及jquery中的each（）和map()他们4者的联系和区别

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(function () { var arr=[1,3,5,7,9]; var obj={0:1,1:3,2:5,3:8,4:9,length:5}; // 利用原生的js的forEach()方法遍历 /* 第一个参数：当前遍历到的元素第二个参数：当前遍历到的索引原生的forEach一样不能遍历伪数组 */ arr.forEach(function(value,index){ console.log(index,value); }); // arr.forEach(function(value,index){ // console.log(index,value); // }) //

js的单线程和异步

阅读更多关于 js的单线程和异步

引用：https://www.cnblogs.com/woodyblog/p/6061671.html 前言说到js的单线程（single threaded）和异步（asynchronous），很多同学不禁会想，这不是自相矛盾么？其实，单线程和异步确实不能同时成为一个语言的特性。js选择了成为单线程的语言，所以它本身不可能是异步的，但js的宿主环境（比如浏览器，Node）是多线程的，宿主环境通过某种方式（事件驱动，下文会讲）使得js具备了异步的属性。往下看，你会发现js的机制是多么的简单高效！说说浏览器 js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。下图说明了浏览器的主要线程。图片来自popAnt 画得太好，忍不住引过来（ http://blog.csdn.net/kfanning/article/details/5768776 ）再说说任务队列刚才说到浏览器为网络请求这样的异步任务单独开了一个线程

订阅 js