原生javascript封装的函数
window.onload = function(){}
2.封装的id函数
function $(id) {
return document.getElementById(id);
}
//调用 $("id")
3.封装的数组id
function $arr(array) {
return document.getElementsByTagName(array);
}
//调用 $arr("数组")
4.自定义平均值函数
function avg(array) {
var sum = 0;
var len = array.length;
for (var i = 0; i < len; i++) {
sum += array[i];
}
return sum / len;
}
5.全选取消
function all(flag) {
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = flag;
}
}
6.封装的类函数
//【主流浏览器（谷歌，火狐，IE9以上的包括IE9）都支持document.getElementsByClassName()函数，IE678不支持】
function getClass(classname, id) {
// 主流浏览器带id
if (document.getElementsByClassName) {
if (id) {
var eleId = document.getElementById(id);
return eleId.getElementsByClassName(classname);
}
// 不带id
else {
return document.getElementsByClassName(classname);
}
}
// IE678浏览器 带id
if (id) {
var eleId = document.getElementById(id);
var dom = eleId.getElementsByTagName("*");
}
// 不带id
else {
var dom = document.getElementsByTagName("*");
}
var arr = [];
for (var i = 0; i < arr.length; i++) {
var txtarr = dom[i].className.split(" ");
for (var j = 0; j < txtarr.length; j++) {
if (txtarr.className == classname) {
arr.push(dom[j]);
}
}
}
}
7.显示函数
function show(obj) {
obj.style.display = "block";
}
//调用 show(id)
8.隐藏函数
function hide(obj) {
obj.style.display = "none";
}
9.封装的id和类函数
function getClass(classname, id) {
// 主流浏览器带id
if (document.getElementsByClassName) {
if (id) {
var eleId = document.getElementById(id);
return eleId.getElementsByClassName(classname);
}
// 不带id
else {
return document.getElementsByClassName(classname);
}
}
// IE678浏览器 带id
if (id) {
var eleId = document.getElementById(id);
var dom = eleId.getElementsByTagName("*");
}
// 不带id
else {
var dom = document.getElementsByTagName("*");
}
var arr = [];
for (var i = 0; i < arr.length; i++) {
var txtarr = dom[i].className.split(" ");
for (var j = 0; j < txtarr.length; j++) {
if (txtarr.className == classname) {
arr.push(dom[j]);
}
}
}
}
function $(str) {
var s = str.charAt(0);
var ss = str.substr(1);
switch (s) {
case "#":
return document.getElementById(ss);
break;
case ".":
return getClass(ss);
break;
default :
return document.getElementsByTagName(str);
}
}
10.封装的scollTop函数
function scroll() {
// 支持IE9+ 和其他主流浏览器
if (window.pageYOffset != null) {
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
// 声明了DTD
// 检测是不是怪异模式的浏览器，就是没有声明<!DOCTYPE html>
else if (document.compatMode == "CSS1Compat") {
return {
// document.documentElement就是document.html的意思 ，但是没有documen.html写法，谷歌不支持这个
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
// 剩下的肯定就是怪异模式的
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
// 调用
window.onscroll = function () {
// scroll().top 就是仿json的写法
console.log(scorll().top);
}
11.封装的可视区域大小的函数
function client() {
if (window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if (document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
12.阻止冒泡
//事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 顺序 IE 6.0: div -> body -> html -> document 其他浏览器: div -> body -> html -> document -> window 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload //阻止冒泡 e ? e.stopPropagation() : window.event.cancelBubble = true;
13.匀速动画
function animate(obj, target) {
clearInterval(obj.timer); // 先清除定时器
var speed = obj.offsetLeft < target ? 15 : -15; // 用来判断 应该 + 还是 -
obj.timer = setInterval(function () {
var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
obj.style.left = obj.offsetLeft + speed + "px";
if (Math.abs(result) <= 15) // 如果差值不小于 5 说明到位置了
{
clearInterval(obj.timer);
obj.style.left = target + "px"; // 有5像素差距 我们直接跳转目标位置
}
}, 10)
}
14.缓动动画
function slowanimate(obj, target) {
clearInterval(obj.timer);
// 定义步长
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = obj.offsetLeft + step + "px";
if (target == obj.offsetLeft) {
clearInterval(obj.timer);
}
}, 30);
}
15.封装的获得CSS样式的函数
function getStyle(obj, attr) {
// IE浏览器 所有IE
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
// w3c 浏览器
return window.getComputedStyle(obj, null)[attr];
}
}
//调用 getStyle(demo,"width") 注意：属性必须写引号
16.封装运动框架的单个属性
function slowanimate(obj, attr, target) {
// 动画原理 盒子本身的样式 + 步长
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var current = parseInt(getStyle(obj, attr));
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px";
if (current == target) {
clearInterval(obj.timer);
}
}, 30);
}
17.封装运动框架的多个属性
function slowanimate(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
for (var attr in json) {
var current = parseInt(getStyle(obj, attr));
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px";
}
}, 30);
}
18.封装运动框架的多个属性 带回调函数、透明度、层级
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var attr in json) {
var current = 0;
if (attr == "opacity") {
current = Math.round(parseInt(getStyle(obj, attr) * 100)) || 0;
}
else {
current = parseInt(getStyle(obj, attr));
}
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 判断透明度
if (attr == "opacity") {
// 主流浏览器
if ("opacity" in json) {
obj.style.opacity = (current + step) / 100;
}
// IE浏览器
else {
obj.style.filter = "alpha(opacity = " + (current + step) * 10 + ")";
}
}
else if (attr == "zIndex") {
obj.style.zIndex = json[attr];
}
else {
obj.style[attr] = current + step + "px";
}
if (current != json[attr]) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30);
}
//调用animate(box,{width:200,left:400,height:800,opacity:30,zIndex:3}, function () {});
19.js原生手机滑动手势
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
varresult = 0;
//如果滑动距离太短
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if (angle >= -45 && angle < 45) {
result = 4;
} else if (angle >= 45 && angle < 135) {
result = 1;
} else if (angle >= -135 && angle < -45) {
result = 2;
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
20.检测字符长度（包含中英文）
//如果直接用str.length 会把中文也按照一个字符来计算，可是一个中文应该占两个字符，所以封装这个函数
function getStringLength(str) {
// 存储字符的总长度
var len = 0;
// 存储每一个编码
var c = 0;
for (var i = 0; i < str.length; i++) {
c = txt.charCodeAt(i);
if (c >= 0 && c <= 127) {
len++;
}
else {
len += 2;
}
}
// 返回字符长度
return len;
}
21.自制滚动条
//首先计算滚动条的高度
// 动态计算滚动条的告诉 滚动条高度/容器的高度 = 容器的高度 / 内容的高度
bar.style.height = box.offsetHeight * box.offsetHeight / content.offsetHeight + "px";
//obj 滚动条 target 内容盒子
function startScroll(obj, target) {
obj.onmousedown = function (event) {
var event = event || window.event;
var y = event.clientY - this.offsetTop;
var that = this;
document.onmousemove = function (event) {
var event = event || window.event;
// 滚动条的的top
var barTop = event.clientY - y;
// 内容盒子的高度 = （大盒子高度-内容盒子的高度）/（滚动盒子的高度 - 滚动条的高度）* 滚动条的top值
var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) * barTop;
if (barTop <= 0) {
barTop = 0;
} else if (barTop >= target.parentNode.offsetHeight - that.offsetHeight) {
barTop = target.parentNode.offsetHeight - that.offsetHeight + "px";
} else {
target.style.top = -contentTop + "px";
}
that.style.top = barTop + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动滑块的时候，选中文字
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
22.阶乘(递归算法)
function factorial(i) {
if (i > 1) {
return factorial(i - 1) * i;
} else {
return 1;
}
}
//调用 factorial(5) 5!
23.倒计时
function showTime(obj) {
var box = document.querySelector(obj);
var ms = new Date("2018/2/11").getTime()- new Date().getTime();
var day = parseInt(ms/1000/3600/24);
var hour = Math.floor(ms/1000/3600%24);
var minute = parseInt(ms/1000/60%60);
var second = parseInt(ms/1000%60);
hour >= 10 ? hour : hour = "0" + hour;
minute >= 10 ? minute : minute = "0" + minute;
second >= 10 ? second : second = "0" + second;
box.innerHTML = "距离放假还有"+day+"天"+hour+"小时"+minute+"分"+second+"秒";
}
24.针对数组的升序降序排列
//针对数组sort（）方法的排序
var arr = [4, 12, 36, 76, 21, 9, 19, 42];
//升序
//第一种
function asc(a,b){
return a-b;
}
//调用 console.log(arr.sort(asc));
//第二种
var res =arr.sort(function (a,b){
return a-b;
})
//降序
//第一种
function desc(a,b){
return b-a;
}
console.log(arr.sort(desc));
//第二种
var res = arr.sort(function(a,b)){
return b-a;
}
//如果为 sortfunction 参数提供了一个函数，那么该函数必须返回下列值之一：
负值，如果所传递的第一个参数比第二个参数小。
负值：就不换位置
零，如果两个参数相等。
正值，如果第一个参数比第二个参数大。
正值:就换位置
25.针对数组的累加求和
arr.reduce(function(total,current,index,arr){
return total+current;
})
26.正则验证身份证
//身份证号验证正则
function validateIdCard(idCard){
//15位和18位身份证号码的正则表达式
var regIdCard=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
//如果通过该验证，说明身份证格式正确，但准确性还需计算
if(regIdCard.test(idCard)){
if(idCard.length==18){
var idCardWi=new Array( 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ); //将前17位加权因子保存在数组里
var idCardY=new Array( 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
var idCardWiSum=0; //用来保存前17位各自乖以加权因子后的总和
for(var i=0;i<17;i++){
idCardWiSum+=idCard.substring(i,i+1)*idCardWi[i];
}
var idCardMod=idCardWiSum%11;//计算出校验码所在数组的位置
var idCardLast=idCard.substring(17);//得到最后一位身份证号码
//如果等于2，则说明校验码是10，身份证号码最后一位应该是X
if(idCardMod==2){
if(idCardLast=="X"||idCardLast=="x"){
return true;
}else{
return false;
}
}else{
//用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
if(idCardLast==idCardY[idCardMod]){
return true;
}else{
return false;
}
}
}
}else{
return false;
}
}
26.验证京东密码
// 验证密码
function testPwd(obj){
// 一种组合
// 纯数字组合
var numReg = /^\d{6,20}$/;
// 纯字母组合
var letterReg = /^[a-zA-Z]{6,20}$/;
// 纯英文字符组合
var charReg = /^[`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 纯中文字符组合
var zhCharReg = /^[？，。《》]{3,10}$/;
// 纯汉字组合
var wordReg = /^[\u4e00-\u9fa5]{6,20}$/;
// 两种组合
// 数字和字母两种组合
var twoReg = /^[0-9a-zA-Z]{6,20}$/;
// 数字和英文字符组合
var nlReg = /^[\d`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 数字和中文字符组合
var nzReg = /^[\d？，。《》]{6,20}$/;
// 数字和中文汉字组合
var nwReg = /^[\d\u4e00-\u9fa5]{6,20}$/;
// 字母和纯英文字符组合
var lcReg = /^[a-zA-Z`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 字母和中文字符组合
var lzReg = /^[a-zA-Z？，。《》]{6,20}$/;
// 字母和中文汉字
var lwReg = /^[a-zA-Z\u4e00-\u9fa5]{6,20}$/;
// 英文字符和中文字符组合
var czReg = /^[？，。《》`~\!\|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 英文字符和中文汉字
var cwReg = /^[\u4e00-\u9fa5\`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 中文字符和中文汉字
var zwReg = /^[\u4e00-\u9fa5\^[？，。《》]{6,20}$/;
if (numReg.test(obj) == true || letterReg.test(obj) == true || charReg.test(obj) == true || zhCharReg.test(obj) || wordReg.test(obj)) {
alert("有被盗风险,建议使用字母、数字和符号两种及以上组合");
} else if (twoReg.test(obj) == true || nlReg.test(obj) == true || nzReg.test(obj) == true || nwReg.test(obj) == true || lcReg.test(obj) == true || lzReg.test(obj) == true || lwReg.test(obj) == true || czReg.test(obj) == true || cwReg.test(obj) == true || zwReg.test(obj) == true) {
alert("安全强度适中，可以使用三种以上的组合来提高安全强度");
} else if (obj.length >= 6) {
alert("你的密码安全");
} else {
alert("请核对输入");
}
}
27.利用正则替换路径问题
/*
* 需求：给图片的src地址前面增加为assets
*
* 1. 将需要匹配的内容原封不动的写入正则表达式
* 2. 将改变的内容替换为.*?
* 3. 将.*?添加(),目的是为了能够将src中的内容单独匹配一次作为匹配结果
* 4.通过replace将内容替换
* content.replace(reg,'<img src="assets/$1" alt="">')
* */
<body>
<ul>
<li class="images"><a href="1.html"><img class="a" src="images/1.jpg" alt="134534"></a></li>
<li><a href="2.html"><img src="images/2.jpg" alt="asdfas2"></a></li>
<li><a href="3.htlm"><img src="images/3.jpg" class="b" alt="3asdf"></a></li>
<li><a href="4.html"><img src="images/4.jpg" alt="45asdf4"></a></li>
<li><a href="5.html"><img src="images/5.jpg" alt="zxcv5" title="abc"></a></li>
</ul>
</body>
<script>
//1。获取ul对象
var ul = document.querySelector('ul');
// 2.获取ul的文本内容,此时就是获取出来ul里所有的内容
var content = ul.innerHTML;
// 3.写正则表达式，先把需要改变的地址原封不动拿过来
// <img src="images/3.jpg" class="b" alt="3asdf">把不一样地方用(.*?)替换，如下
// .匹配的是非空字符*匹配任意数量?拒绝贪婪，匹配任意数量的非空字符，如果不加?，就会匹配到最后
var reg = /<img(.*?)src="(.*?)"(.*?)>/g;
var result = content.replace(reg,'<img$1src="assets/$2"$3>')
console.log(result);
</script>
28.去除数组中的重复值，打印出不重复的元素
function unique(arr) {
// 定义一个空数组，用来存放不重复的值
var newArr = [];
// 遍历原数组
for (var i = 0; i < arr.length; i++) {
// 如果新数组里查找原数组 ，因为查找不到indexOf的值为-1,如果查找不到就把原数组的值放到新数组中
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
29.获取url地址的后缀名
var str = "https://www.baidu.com/index.php?tn=78040160_40_pg";
两种方法：任选其一
// 数组拆分
function getURLtype(str){
var arr = str.split(".");
var arr1 = arr[arr.length - 1].split("?");
console.log(arr1[0]);
}
//输出php
// lastIndexOf
function getURLtype(str) {
var index = str.lastIndexOf(".");
var index2 = str.indexOf("?");
console.log(str.slice(index, index2));
}
//输出.php
30.字符串转换为对象
function strToObj(str) {
// 定义一个空对象
var obj = {};
// 切割字符串为数组
var arr = str.split("; ");
// 遍历数组
arr.forEach(function (value, key) {
// 获取第一个等号出现的位置
var index = arr[key].indexOf("=");
// 以等号切割
var res = arr[key].split(/[=]/);
obj[res[0]] = arr[key].slice(index + 1);
})
console.log(obj);
}
31.查找字符串的每个字符在字符串出现的次数，从小到大输出
function strCount(str) {
var obj = {};
for (var i = 0; i < str.length; i++) {
if (obj[str[i]]) {
//obj[str[i]] 是对象的一种形式，也就是obj[str[0]] 就是obj['a']=obj.a，在str中查找obj.a obj.b 等等,如果找到 就+1，找不到就是1
obj[str[i]]++;
} else {
obj[str[i]] = 1;
}
}
// 获取object.keys ["1", "2", "a", "b", "d", "e"]
var num = Object.keys(obj).sort(function (a,b) {
// obj[a] obj.1 就是次数
return obj[a]-obj[b];
});
var newObj = {};
for (var item in num) {
newObj[num[item]] = obj[num[item]];
}
return newObj;
}
32.全选，取消全选，反选
// 全选
function allSelect(obj, input) {
obj.onclick = function () {
input.forEach(function (value, key) {
input[key].checked = true;
})
}
}
// 取消全选
function cancelSelect(obj, input) {
obj.onclick = function () {
input.forEach(function (value, key) {
input[key].checked = false;
})
}
}
// 反选
function reverseSelect(obj, input) {
obj.onclick = function () {
input.forEach(function (value, key) {
if (input[key].checked){
input[key].checked = false;
} else {
input[key].checked = true;
}
})
}
}
33.添加类名、删除类名（移除类名）
// 添加类名
function addClass(obj, className) {
// 获取对象的类名，并且去掉两边空格 以防class = " box "的情况
var oldClass = obj.className.trim();
// 把获取到的对象的类名以空格的形式拆分为数组,指定的形式可以是正则表达式,/\s+/ \s是匹配到空格，+最少匹配一个，以防页面中有多个空格
var classArr = oldClass.split(/\s+/);
// 在拆分后的数组中查找要传进来的类名，通过索引值，如果索引值为-1，就查找不到
if (classArr.indexOf(className) == -1) {
// 找不到需要添加的类型的话，就把这个类名添加到数组中
classArr.push(className);
// 然后把添加类名的对象的类名的数组形式转换为字符串,此时obj.className中的className 不是形参，而是类名
obj.className = classArr.join(' ');
}
}
// 移除类名
function removeClass(obj, className) {
var oldClass = obj.className.trim();
var classArr = oldClass.split(/\s+/);
// 在拆分后的数组如果找到了需要移除的类名，那么就移除这个类名
if (classArr.indexOf(className) != -1) {
classArr.splice(classArr.indexOf(className), 1);
obj.className = classArr.join(' ');
}
}
34.放大镜效果
/*
* 功能:实现电商网站放大镜效果
* @param Object box: 放大镜最大盒子的容器
* @param Object small: 放小图片的小盒子
* @param Object smallImg: 小盒子的图片
* @param Object shadow: 鼠标遮罩的阴影层
* @param Object big: 装放大图片的盒子
* @param Object bigImg: 放大的图片
* */
function magnifier(box, small, smallImg, shadow, big, bigImg) {
// 鼠标移入小盒子，显示阴影放大镜盒子
small.onmouseenter = function () {
shadow.style.display = "block";
big.style.display = "block";
// 设置阴影盒子的宽高阴影盒子的宽高，不是随便给的
// 阴影盒子的宽高/small盒子的宽高 应该等于 big盒子的宽高(不能包含边框 ，所以用clientWidth 因为offsetWidth包含宽高)/ bigImg的宽高，他们是等比例关系 也就是x/450 = 540/800
shadow.style.width = small.offsetWidth * big.clientWidth / bigImg.offsetWidth + "px";
shadow.style.height = small.offsetWidth * big.clientWidth / bigImg.offsetWidth + "px";
// 移动阴影，因为只有在进入small盒子是，才可以移动，所以在这里出发移动事件
small.onmousemove = function (ent) {
var e = ent || window.event;
/*
* 让鼠标一直保持在阴影盒子的中间,所以鼠标的起始位置就是阴影盒子的宽高的一半
* 阴影的left/top值= 鼠标距离页面的距离 - 小盒子距离页面的距离 - 阴影盒子自身（宽高）的一半
* */
// 此时没有small盒子的offsetLeft 是因为offsetLeft属性是距离有定位的祖辈盒子的距离，因为small的父级盒子box相对定位，所以small.offsetLeft 永远都为0，因为box和small盒子一样大，所以用box.offsetLeft
// 为了不让阴影盒子超出边界，需要判断一下，
var left = e.pageX - box.offsetLeft - shadow.offsetWidth / 2;
if (left < 0) {
left = 0;
} else if (left > box.offsetWidth - shadow.offsetWidth) {
left = box.offsetWidth - shadow.offsetWidth;
}
var top = e.pageY - box.offsetTop - shadow.offsetHeight / 2;
if (top < 0) {
top = 0;
} else if (top > box.offsetWidth - shadow.offsetWidth) {
top = box.offsetWidth - shadow.offsetWidth;
}
shadow.style.left = left + "px";
shadow.style.top = top + "px";
// 上面都是计算出阴影的移动，下面计算出放大镜的右侧盒子移动的部分
/*
* 放大镜应该是等比例缩放的，small盒子的宽高450，放大镜图片的是800
* 右侧盒子和左侧盒子的比例就是800/450，假如 左侧鼠标的坐标位置是（100,100），如果他们是二倍关系，那么右侧盒子图片的坐标就是应该(100*2,100*2)
* 所以右侧盒子图片的left，top值就应该是(左侧left*800/450，左侧top*800/450)
* 由于右侧是盒子里面包含一个特别大的图片，图片的内容也超出右侧盒子的距离，可以用big.scrollTop（Left） 来设置坐标
* */
big.scrollTop = top * bigImg.offsetHeight / smallImg.offsetWidth;
big.scrollLeft = left * bigImg.offsetHeight / smallImg.offsetWidth;
}
}
// 鼠标离开小盒子，继续隐藏
small.onmouseleave = function () {
shadow.style.display = "none";
big.style.display = "none";
}
};
35.添加移除绑定事件
/*
* 添加绑定事件
* @param Object obj:绑定的事件对象
* @param String eventName:绑定的事件名称
* @param function callback:绑定事件执行的函数
* */
function addEvent(obj, eventName, callback) {
if (obj.addEventListener) {
obj.addEventListener(eventName, callback, false);
} else {
obj.attachEvent('on' + eventName, callback);
}
}
/*
* 移除绑定事件
* @param Object obj:移除绑定的事件对象
* @param String eventName:移除绑定的事件名称
* @param function callback:移除绑定事件执行的函数
* */
function removeEvent(obj, eventName, callback) {
if (obj.removeEventListener) {
obj.removeEventListener(eventName, callback, false);
} else {
obj.detachEvent('on' + eventName, callback);
}
}
36.获取样式
/*
* 获取样式
* @param Object obj获取样式的对象
* @param Object attr:获取的css样式名称
* return 获取样式的值
* */
function getStyle(obj, attr) {
return document.defaultView ? document.defaultView.getComputedStyle(obj, null)[attr] : obj.currentStyle[attr];
}
// 调用，需要给attr加引号
console.log(getStyle(box, 'backgroundColor'));
主流浏览器获取的颜色都转换成rgb值，IE8获取的是style样式里面写的属性值，写什么就是什么
37.阻止默认行为
e ?e.preventDefault() : window.event.returnValue = false;e ?e.preventDefault() : window.event.returnValue = false;
38.移动端视口
function getFontSize() {
// 定义html的字体大小
var htmlFontSize = 16;
// 以iphone6为准 设置窗口宽度
var cw = 375;
// 获取新窗口的可视宽度
var newCw = document.documentElement.clientWidth || document.body.clientWidth;
// 获取新窗口的字体大小
var newHtmlFontSize = newCw * htmlFontSize / cw;
document.documentElement.style.fontSize = newHtmlFontSize + 'px';
}
奋斗就是每天很难，可是一年一年却越来越容易；
不奋斗就是每天很容易，可是一年一年却越来越难。
