原生JS函数
2016-11-30 本文已影响0人
卓小生
兼容写法--获取运行完的样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//IE
}else{
var style = getComputedStyle(obj);//非IE
return style[attr];
}
}
运动函数
function box(obj, attr, position, callback){//callback 回调函数
var pos = getStyle(obj, attr);
pos = parseInt(pos);
var conversion;
if( position>pos ){
conversion = false;
}
else{
conversion = true;
}
var step = conversion ? -5: 5;
var timer = setInterval(function(){
pos += step;
if( conversion && pos < position || !conversion && pos>position ){
pos = position;
}
obj.style[attr] = pos+'px';
if(pos==position){
clearInterval(timer);
callback && callback();
}
}, 20);
}
选项卡函数
function tabs(obj){
var options = obj.children[0].children[0].children;//获取li集合
var content = obj.getElementsByClassName('content')[0];
var contents = content.children;//获取div集合
for(var i=0;i<options.length;i++){
options[i].index = i;
options[i].onclick = function(){
for(var i=0;i<options.length;i++){
options[i].className = '';
}
this.className = 'active';
var index = this.index;
for(var i=0;i<contents.length;i++){
contents[i].style.display = 'none'
}
contents[index].style.display = 'block';
}
}
}
比较大小
for(var i=0;i<arr.length-1;i++){
for(var j=i;j<arr.length;j++){
if(arr[j]<arr[i]){
temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
// return arr;
}
function detectNum(str){
var n;
for(var i=0; i<str.length; i++){
n = str.charCodeAt(i) ;
if( n<48 || n>57){
return false
}
}
return true;
}
到文档顶部位置:
<style>
*{
margin:0;
padding: 0;
}
div{
padding: 30px;
}
#d1{
margin:10px;
background: lightblue;
}
#d2{
background: #ccc;
}
#d3{
background: pink;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3"></div>
</div>
</div>
<script>
var d3=document.getElementById('d3');
function getPos(obj) {
var pos = {left:0, top:0};
while (obj) {
pos.left += obj.offsetLeft;//30 + 30 + 10 + 0
pos.top += obj.offsetTop;//30+ 80+10 + 0
obj = obj.offsetParent;//null
}
return pos;
}
console.log( getPos(d3) );
该方法返回0到1之间的一个伪随机数，可能等于0，但是一定小于1
// 返回给定范围内的随机数
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
// 返回给定范围内的随机整数
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡阻止
兼容浏览器
这一句的用途：需要获取和事件相关的信息时使用。如：
-
获取键盘按下或弹起的按键
-
获取鼠标的位置坐标
-
获取出发改事件的元素
-
获取事件名称
-
获取事件当前的传播阶段
-
获取事件生成的日期时间
function fn(ev){ //直接使用event或者window.event得到事件本身
var ev = ev || window.enent; alert(ev);//兼容写法
}
取消冒泡
function stopPropagation(e) {
if(e.stopPropagation) {
e.stopPropagation();
} else{
e.cancelBubble = true;
}
阻止默认行为
function preventDefault(e) {
if(e.preventDefault) {
e.preventDefault();
}else{
e.returnValue = false;
}
}
