常用 js 代码 - 2

于 2017-11-19 21:52:09 发布
阅读量484 收藏
点赞数
分类专栏： js javascript

ajax

function ajax(url, fnSucc, fnFaild) {
    //1.创建Ajax对象 处理兼容性
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    } else {
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.连接服务器
    oAjax.open('GET', url, true);

    //3.发送请求
    oAjax.send();

    //4.接收返回
    oAjax.onreadystatechange=function () {
        // readyState属性：请求状态
        // 0    （未初始化）还没有调用open()方法
        // 1    （载入）已调用send()方法，正在发送请求
        // 2    （载入完成）send()方法完成，已收到全部响应内容
        // 3    （解析）正在解析响应内容
        // 4    （完成）响应内容解析完成，可以在客户端调用了
        if(oAjax.readyState==4) {
            if(oAjax.status==200){      //成功
                fnSucc(oAjax.responseText);
            } else {
                if(fnFaild){
                    fnFaild(oAjax.status);
                }
            }
        }
    };
}

右下方悬浮框


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

    oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

匀速移动


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>
<script>
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');

    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;

        if(oDiv.offsetLeft<iTarget)
        {
            speed=7;
        }
        else
        {
            speed=-7;
        }

        if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
        {
            clearInterval(timer);

            oDiv.style.left=iTarget+'px';
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="到100" onclick="startMove(100)" />
<input type="button" value="到300" onclick="startMove(300)" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

分享移入移出框


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');

    oDiv.onmouseover=function ()
    {
        startMove(0);
    };
    oDiv.onmouseout=function ()
    {
        startMove(-150);
    };
};

var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');

    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;

        if(oDiv.offsetLeft>iTarget)
        {
            speed=-10;
        }
        else
        {
            speed=10;
        }

        if(oDiv.offsetLeft==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>
</head>

<body>
<div id="div1">
    <span>分享到</span>
</div>
</body>
</html>

完美框架

function getStyle(obj, name)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[name];
    }
    else
    {
        return getComputedStyle(obj, false)[name];
    }
}


//startMove(oDiv, {width: 400, height: 400})


function startMove(obj, json, fnEnd)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true;     //假设：所有值都已经到了

        for(var attr in json)
        {
            var cur=0;

            if(attr=='opacity')
            {
                cur=Math.round(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                cur=parseInt(getStyle(obj, attr));
            }

            var speed=(json[attr]-cur)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);

            if(cur!=json[attr])
                bStop=false;

            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style.opacity=(cur+speed)/100;
            }
            else
            {
                obj.style[attr]=cur+speed+'px';
            }
        }

        if(bStop)
        {
            clearInterval(obj.timer);

            if(fnEnd)fnEnd();
        }
    }, 30);
}

完美运动框架 发布微博

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#ul1 {width:400px; height:400px; border:1px solid black; margin:10px auto; overflow:hidden;}
#ul1 li {border-bottom:1px #999 dashed; padding:4px; list-style:none; overflow:hidden; filter:alpha(opacity:0); opacity:0;}
</style>
<script src="move2.js"></script>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    var oTxt=document.getElementById('txt1');

    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');

        oLi.innerHTML=oTxt.value;
        oTxt.value='';

        if(oUl.children.length>0)
        {
            oUl.insertBefore(oLi, oUl.children[0]);
        }
        else
        {
            oUl.appendChild(oLi);
        }

        //运动
        var iHeight=oLi.offsetHeight;

        oLi.style.height='0';

        startMove(oLi, {height: iHeight}, function (){
            startMove(oLi, {opacity: 100});
        });
        //alert(iHeight);
    };
};
</script>
</head>

<body>
<textarea id="txt1" rows="4" cols="40"></textarea>
<input id="btn1" type="button" value="发布" />
<ul id="ul1">
</ul>
</body>
</html>

完美运动框架 改变样式

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script src="move2.js"></script>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');

    oBtn.onclick=function ()
    {
        startMove(oDiv, {width: 101, height: 300, opacity: 100}, function (){
            alert('a');
        });
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
</body>
</html>

正则

var re=/a/i;
var str='abcdef';
alert(str.search(re));      // 0

var str='adsf 03 23 vcxzxcv';
var re=/\d/;    
alert(str.search(re));      // 5

var str='asdf 34 656 cvs33';
var re=/\d/g;
alert(str.match(re));       // [3,4,6,5,6,3,3]

var str='asdf 34 656 cvs33';
var re=/\d+/g;
alert(str.match(re));       // [34,656,33]

var str='abc aaa erw';
var re=/a/g;
alert(str.replace(re, '0'));  // 0bc 000 erw

var re=/<[^<>]+>/g;
oTxt2.value=oTxt1.value.replace(re, ''); // 过滤尖括号

var re=new RegExp('b', 'i');   // 另一种正则表达式
var str='abcdef';
alert(str.search(re))

滚动条控制 div 透明度

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#parent {width:600px; height:20px; background:#CCC; position:relative; margin:10px auto;}
#div1 {width:20px; height:20px; background:red; position:absolute; left:0; top:0;}
#div2 {width:300px; height:300px; background:green; filter:alpha(opacity:0); opacity:0;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var oParent=document.getElementById('parent');

    var disX=0;

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;

        disX=oEvent.clientX-oDiv.offsetLeft;

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;

            if(l<0)
            {
                l=0;
            }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWidth;
            }

            oDiv.style.left=l+'px';

            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            document.title=scale;

            oDiv2.style.filter='alpha(opacity:'+scale*100+')';
            oDiv2.style.opacity=scale;
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };

        return false;   //chrome、ff、IE9
    };
};
</script>
</head>

<body>
<div id="parent">
    <div id="div1"></div>
</div>
<div id="div2"></div>
</body>
</html>

滚动条控制文字显示区域


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#parent {width:600px; height:20px; background:#CCC; position:relative; margin:10px auto;}
#div1 {width:20px; height:20px; background:red; position:absolute; left:0; top:0;}
#div2 {width:400px; height:300px; border:1px solid black; overflow:hidden; position:relative;}
#div3 {position:absolute; left:0; top:0; padding:4px;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var oDiv3=document.getElementById('div3');
    var oParent=document.getElementById('parent');

    var disX=0;

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;

        disX=oEvent.clientX-oDiv.offsetLeft;

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;

            if(l<0)
            {
                l=0;
            }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWidth;
            }

            oDiv.style.left=l+'px';

            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            document.title=scale;

            oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };

        return false;   //chrome、ff、IE9
    };
};
</script>
</head>

<body>
<div id="parent">
    <div id="div1"></div>
</div>
<div id="div2">
    <div id="div3">
    第一部分: 入门课程、了解JavaScript - 案例+知识点，夯实基础做足准备

*  限于篇幅，大纲只列出部分课上内容和小部分案例
第1课 初识JavaScript
JS是什么：大型网站应用效果分析
JS编写流程：布局、样式、编写代码、测试
JS中的事件：onclick、onmouseover等
getElementById获取元素
用style修改样式
例子：百度首页下拉列表>>查看
例子：网站弹出层>>查看
合并相似代码
函数的写法、作用
变量的使用
className的使用，JS属性和HTML属性
例子：淘宝网下拉菜单+CSS3简单应用>>查看
if判断：根据情况，执行不同程序
例子：收缩展开菜单>>查看
本课总结：常见JS问题
本课练习
第2课 Javascript入门基础
JS函数传参：怎么传、传什么、哪里用
传多个参数
JS中操作属性的第二种方式
style和className的区别和冲突
提取行间事件：行为、样式、结构三者分离
获取元素的第二种方法：getElementsByTagName
数组的使用
循环：while循环、自增、for循环
例子：邮箱常见的全选、反选效果>>查看
JS基础效果：选项卡>>查看
利用索引值，关联多组元素
另一种选项卡：innerHTML的使用>>查看
本课总结：循环变量陷阱
本课练习
申请免费试听 我要报名学习
第二部分: 基础课程、灵活运用 - 超过100个实用交互课堂演示实例

*  限于篇幅，大纲只列出部分课上内容和小部分案例
第3课 Javascript基础知识
JS能做什么、JS不能做什么
JS组成和功能：DOM、BOM、ECMA
JS中的变量类型：typeof，常见变量类型
什么是object类型
变量类型转换：为什么转换、什么时候转换
parseInt、parseFloat、Number
例子：JS实现的简易计算器>>查看
NaN的作用和检测，什么时候会因为NaN出问题
显式类型转换和隐式类型转换
变量作用域，闭包的简单理解
JS中的命名规范，各种常见前缀的使用
JS中的运算符
取模操作的简单应用：隔行变色、简易秒表>>查看
赋值、比较、逻辑运算符
运算优先级，括号的使用
例子：字符串连接的优先级陷阱
JS中的流程控制：判断、跳出
什么是真，什么是假：JS中变量的“真假”
本课总结
本课练习
第4课 JavaScript中的定时器
定时器基础：什么是定时器
两种定时器的区别
定时器和循环的区别和转换
定时器的开启和关闭
例子：秒表和延时隐藏>>查看
定时器应用例子：简易数码时钟（文字版、图片版、CSS3版）>>查看
Date对象的使用，日期和时间的获取
函数返回值、charAt方法的使用
定时器应用例子：QQ资料框（延时隐藏、事件合并）>>查看
定时器应用例子：自动播放的选项卡（计数、越界、暂停）>>查看
本课总结
本课练习
第5课 JS深入、数组、字符串
arguments的使用
数据类型的使用：参数、变量、返回值
currentStyle、getComputedStyle
JS中兼容问题的处理、工具函数的封装
Json基础：什么是json，用在什么地方
Json和数组的区别
用for in进行Json循环
字符串方法：substring、分割、比较、大小写
字符串和字符编码的转换
数组基础：定义、属性、类型
数组方法：添加、删除、替换
数组的排序、拼接和转换
比较函数的原理和使用
本课总结：循环变量陷阱
本课练习
第6课 DOM、BOM
DOM节点：子节点、父节点、兄弟节点
结构父节点和定位父节点
两种子节点属性的区别
第三种选择元素的方式——getByClass
节点的创建：createElement的使用
节点的插入：appendChild、insertBefore
节点的删除：removeChild
节点的替换：replaceChild
例子：简易JS留言板（无后台版）>>查看
例子：邮箱附件的上传和删除>>查看
innerHTML的Bug
BOM基础：窗体操作（open、close）
操作子窗体的内容
关闭窗体的提示问题
常用的BOM属性、浏览器类型测试
例子：腾讯图片hash页码的获取和设置>>查看
可视区的含义和尺寸、滚动距离
BOM常用事件：onscroll、onresize、IE6检测
例子：侧边栏悬浮广告及兼容处理>>查看
本课总结：循环变量陷阱
本课练习
第7课 Ajax基础

    </div>
</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值