Never say never for ss

原创 如何取消鼠标右键功能

只需要将下面的代码放到代码里就可以了document.oncontextmenu=function(){    return false;}

原创 css如何实现图片垂直水平居中

图片的居中显示css有很多方法，但在很多情况下有的方法无效，这是件很头疼的事情，比如一般设置图片属性text-align:centre水平居中，但这个方法经常无效，很多前端攻程师都有研究过或者说是搜索过css图片居中方法吧。但其实css图片居中有多种不同的情况，也有多种不同的解决方法，具体方法如下所示：图片居中又分为水平居中和垂直居中一、水平

原创 十二，ES6 新增Proxy代理

Proxy概述Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“

原创 十一，ES6新添的一种数据类型Symbol

Symbol  解决对象的属性名冲突还记得我们熟知的几种数据类型吧！String  Number  Object  undefined  Null  Boolean现在又多了一种类型就是Symbollet a=Symbol()console.log(a)//Symbol()console.log(typeof a)//symbol以上代码用一个Symbol()函数创

原创 九，ES6为函数做的一些扩展

参数的默认值传统方法：function demo(m,n){var name=m||"shasha";var age=n||20;}传统做法实现原理是：如果运算符||左侧是true则直接返回左侧的，反之，返回右侧的；不过有一个缺点，就是如果我想传进去0的话，那么就不行了，或者说传入的参数布尔值为false就不可以了，ES6新方法：function demo(m=

原创 八，ES6为对象做的一些扩展

ES6中对象属性的写法：var  name="老沙";var age=200;var person={name,age}console.log(person}//person{name:"老沙",age:"200"}新写法只需要简单的写入变量名即可；ES6中对象方法的写法：传统写法：preson={name:“老沙”,age:function(){r

原创 七，ES6为数组做的一些扩展

Array.of( )、Array.from( )、find( )、findIndex( )、fill( )、entries( )、values()

原创 五，ES6为数值做的一些扩展

Math.acosh(x) 返回 x 的反双曲余弦。Math.asinh(x) 返回 x 的反双曲正弦。Math.atanh(x) 返回 x 的反双曲正切。Math.clz32(x) 返回 x 的 32 位二进制整数表示形式的前导 0 的个数。Math.sinh(x) 返回x的双曲正弦。Math.cosh(x) 返回 x 的双曲余弦。Math.expm1(x) 返回 eˆx - 1。Math.fround(x) 返回 x 的单精度浮点数形式。Math.hypot(...values) 返回所

原创 四，ES6给string带来的一些特性

ES6给字符串带来了很多实用性的扩展：模板字符串，标签模板，repeat函数、includes函数，startsWith函数，endsWith函数，codePointAt函数，String.fromCodePoint函数，String.raw函数

原创 三，ES6新特性 解构赋值

首先看一下定义：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构；传统的变量赋值是这样的：var  arr=[1,2,3];var a=arr[0]; //1var b=arr[1]; //2var c=arr[2]; //3解构赋值是如何操作的呢：var [a,b,c]=[1,2,3];console.log(a) /

原创 二，ES6中新增const关键字的使用方法

之前用var声明变量，变量想怎么改就怎么改，这里const关键字也是声明变量的，不过声明的是常量，常量就是固定的一个值，不能改变，例如：const name=“唐僧”；name="老沙"//  报错 因为它要更改常量name只在块级作用于起作用，和let关键字一样if(true){const age=20;}alert(age)//报错 age在代码块外不起作用

原创 一，ES6新增let关键字使用方法

之前声明一个变量都是用关键字var来声明，现在可以用let关键字来声明了，其实用var来声明变量是有缺点的，不信请君往下看。肯定好多人这样做过想弹其下标：var li=document.getElementsByTagName("li");for(var i=0;ili[i].onclick=function(){alert(i);}}不过结果却是不尽人意，因为

转载 终于理解原型链了

转载 深入理解原型对象和原型链

在Javascript中，万物皆对象，但对象也有区别，大致可以分为两类，即：普通对象（Object）和函数对象（Function）。一般而言，通过new Function产生的对象是函数对象，其他对象都是普通对象。举例说明：function f1(){ //todo}var f2 = function(){ //todo};var f3 = ne

转载 深入理解函数的作用域

一、作用域（scope）所谓作用域就是：变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。 1 function scope(){ 2 var foo = "global"; 3 if(window.getComputedStyle){ 4 var a = "I'm if"; 5 console.log(

转载 深入理解 new 的运行机制

和其他高级语言一样 javascript 中也有 new 运算符，我们知道 new 运算符是用来实例化一个类，从而在内存中分配一个实例对象。 但在 javascript 中，万物皆对象，为什么还要通过 new 来产生对象？ 本文将带你一起来探索 javascript 中 new 的奥秘...一、认识new运算符： 1 function Animal(name){ 2

转载 JS 闭包原理

闭包，是 Javascript 比较重要的一个概念，对于初学者来讲，闭包是一个特别抽象的概念，特别是ECMA规范给的定义，如果没有实战经验，很难从定义去理解它。因此，本文不会对闭包的概念进行大篇幅描述，直接上干货，让你分分钟学会闭包！1 闭包，一睹为快在接触一个新技术的时候，我首先会做的一件事就是找它的 demo code。对于我们来说，看代码比自然语言更能理解一个事物的本质。其实

转载 JS正则表达式常用总结

正则表达式的创建JS正则表达式的创建有两种方式： new RegExp() 和 直接字面量。//使用RegExp对象创建var regObj = new RegExp("(^\\s+)|(\\s+$)","g"); // 双斜杠表示转移//使用直接字面量创建var regStr = /(^\s+)|(\s+$)/g;其中 g 表示全文匹配，与之相关的

转载 H5单页面手势滑屏切换原理

H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的，效果图如下所示，本文简单说一下其实现原理和主要思路。1、实现原理假设有5个页面，每个页面占屏幕100%宽，则创建一个DIV容器viewport，将其宽度(width) 设置为500%，然后将5个页面装入容器中，并让这5个页面平分整个容器，最后

原创 日历css代码

body {    background-color: #efefef;}#CalendarMain {    width: 300px;    height: 300px;    border: 1px solid #ccc;    margin: 0 auto;    margin-top: 100px;}#title {    width: 100

原创 日历js代码

$(document).ready(function(e) {            CalendarHandler.initialize();        });        var CalendarHandler = {            currentYear: 0,            currentMonth: 0,            isR

原创 canvas制作时钟js代码

var dom = document.getElementById('clock');var ctx = dom.getContext('2d');var width = ctx.canvas.width;var height = ctx.canvas.height;var r = width / 2;//定义钟盘function drawBackground(){ 

原创 十，（补充）ES6中箭头函数this的指向

var obj = { x:100, show(){ setTimeout( function(){console.log(this.x);}, 500 ); } }; obj.show();//打印结果：undefined

原创 六，（补充）ES6给Math对象新增的17个函数

Math.acosh(x) 返回 x 的反双曲余弦。Math.asinh(x) 返回 x 的反双曲正弦。Math.atanh(x) 返回 x 的反双曲正切。Math.clz32(x) 返回 x 的 32 位二进制整数表示形式的前导 0 的个数。Math.sinh(x) 返回x的双曲正弦。Math.cosh(x) 返回 x 的双曲余弦。Math.exp

翻译 JavaScript小游戏

Ping Pong * { box-sizing: border-box; margin: 0px; padding: 0px; } #playground{ background: url(images/bg1.png); width: 400px; height: 200px; posi

原创 如何拖动DOM元素

css部分.divblok { background-color:rgba(172,16,172,0.5); width:200px; height:100px; position:absolute; left:20px;

转载 JavaScript的引用类型

Object类型　　Object类型是JavaScript中使用最多的一种类型。虽然Object的实例不具备多少功能，但对于在应用程序中存储和传输数据而言，它确实是非常理想的选择。　　创建Object实例的方式有两种，第一种是使用new操作符后跟Object构造函数。 var person = new Object(); person.name = "tt";

原创 逻辑与和逻辑或运算符

console.log("0 || 1 = "+(0 || 1));console.log("1 || 2 = "+(1 || 2));console.log("0 && 1 = "+(0 && 1));console.log("1 && 2 = "+(1 && 2));逻辑与和逻辑或运算符会返回一个值，并且二者都是短路运算符：逻辑与返回第一个是 false 的操作数 或者

转载 setTimeout 使用方法详解

计时器setTimeout是我们经常会用到的，它用于在指定的毫秒数后调用函数或计算表达式。语法：1setTimeout(code, millisec, args);注意：如果code为字符串，相当于执行eval()方法来执行code。当然，这一篇文章并不仅仅告诉你怎么用setTi

原创 js 如何实现sum(2,3)===sum(2)(3);

function sum() {  var num = arguments[0];  if(arguments.length === 2) {    return arguments[0] + arguments[1]  } else {    return function(sec) {       return num + sec;    }  } }

转载 JavaScript 的运行机制详解：再谈Event Loop

一、为什么JavaScript是单线程？JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定Java

原创 js如何判断一个数是不是整数类型

方法一：function num(n){return typeof n==="number&&n%1===0;}num(2)  //truenum(9.9)//falsemun("asd")//false........方法二：function num(n){return Math.floor(n)====n;}num(2)  //t

转载 javascript中的继承详解

[html] view plain copy >  html>        head>          meta charset="UTF-8">          title>title>          script type="text/javascript">              function MAN(name, 

原创 使用 typeof bar === “object” 判断 bar 是不是一个对象的弊端

var  obj = {};var  arr = [];console.log(typeof obj === 'object');  //trueconsole.log(typeof arr === 'object');  //trueconsole.log(typeof isNAN == 'object');  //trueconsole.log(Object.proto

原创 使用js和jQuery分别实现弹起对象下标

js弹起下标(主要代码)for (var i = 0; i li[i].index=i; li[i].onclick = function(){ alert(this.index); };};jQ弹起下标(主要代码)$("#ul li").click(function(){alert( $( "#ul li" ).in

原创 jQuery如何根据元素值删除数组元素

用到的方法$.inArry();$.inArray( value, array [, fromIndex ] )value任意类型 用于查找的值。arrayArray类型 指定被查找的数组。fromIndex可选。Number类型 指定从数组的指定索引位置开始查找，默认为 0函数用于在数组中

原创 如何实现页面滚动到下面再加载

$(function(){$(window).scroll(function(){    var documentTop = $(document).scrollTop();    var windowHeight = $(window).height();    var documentHeight = $(document).height();    //当 documen

原创 CSS3:nth-child的用法

:nth-child(2)选取第几个标签，正整数.ul li:nth-child(2){background:#090}:nth-child(n+4)选取大于等于4标签，“n”表示从整数，下面一样.ul li:nth-child(n+4){background:#090}:nth-child(-n+4)选取小于等于4标签.ul li:nth-child(-n+4){backgr

原创 height:100%和height:auto的区别

height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度

转载 CSS3 display:box;和 box-flex详解

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-w