常用 js 代码
来源：互联网 发布：淘宝旧货二手市场 编辑：程序博客网 时间：2024/06/12 00:09
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)); // 0var str='adsf 03 23 vcxzxcv';var re=/\d/; alert(str.search(re)); // 5var 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 erwvar 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课 初识JavaScriptJS是什么：大型网站应用效果分析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、ECMAJS中的变量类型：typeof，常见变量类型什么是object类型变量类型转换：为什么转换、什么时候转换parseInt、parseFloat、Number例子：JS实现的简易计算器>>查看NaN的作用和检测，什么时候会因为NaN出问题显式类型转换和隐式类型转换变量作用域，闭包的简单理解JS中的命名规范，各种常见前缀的使用JS中的运算符取模操作的简单应用：隔行变色、简易秒表>>查看赋值、比较、逻辑运算符运算优先级，括号的使用例子：字符串连接的优先级陷阱JS中的流程控制：判断、跳出什么是真，什么是假：JS中变量的“真假”本课总结本课练习第4课 JavaScript中的定时器定时器基础：什么是定时器两种定时器的区别定时器和循环的区别和转换定时器的开启和关闭例子：秒表和延时隐藏>>查看定时器应用例子：简易数码时钟（文字版、图片版、CSS3版）>>查看Date对象的使用，日期和时间的获取函数返回值、charAt方法的使用定时器应用例子：QQ资料框（延时隐藏、事件合并）>>查看定时器应用例子：自动播放的选项卡（计数、越界、暂停）>>查看本课总结本课练习第5课 JS深入、数组、字符串arguments的使用数据类型的使用：参数、变量、返回值currentStyle、getComputedStyleJS中兼容问题的处理、工具函数的封装Json基础：什么是json，用在什么地方Json和数组的区别用for in进行Json循环字符串方法：substring、分割、比较、大小写字符串和字符编码的转换数组基础：定义、属性、类型数组方法：添加、删除、替换数组的排序、拼接和转换比较函数的原理和使用本课总结：循环变量陷阱本课练习第6课 DOM、BOMDOM节点：子节点、父节点、兄弟节点结构父节点和定位父节点两种子节点属性的区别第三种选择元素的方式——getByClass节点的创建：createElement的使用节点的插入：appendChild、insertBefore节点的删除：removeChild节点的替换：replaceChild例子：简易JS留言板（无后台版）>>查看例子：邮箱附件的上传和删除>>查看innerHTML的BugBOM基础：窗体操作（open、close）操作子窗体的内容关闭窗体的提示问题常用的BOM属性、浏览器类型测试例子：腾讯图片hash页码的获取和设置>>查看可视区的含义和尺寸、滚动距离BOM常用事件：onscroll、onresize、IE6检测例子：侧边栏悬浮广告及兼容处理>>查看本课总结：循环变量陷阱本课练习第7课 Ajax基础 </div></div></body></html>阅读全文
0 0
- 常用js代码
- 常用js代码
- 常用JS代码收集
- 常用的JS代码
- 常用的JS代码
- 常用js代码
- 常用js代码
- 常用js代码备注.
- 常用JS代码集
- 常用的JS代码
- 常用js代码
- JS常用代码笔记
- 常用JS代码收集
- 常用js代码
- 常用js代码
- 常用JS代码集锦
- 常用的JS代码
- 常用的JS代码
- Android NDK实现apk文件的增量更新
- 算法分析与设计课程作业第十周#1
- 网络基础知识-1
- Java中char占用几个字节
- CANoe学习笔记
- 常用 js 代码
- QRCode读取
- PAT Basic 1014
- 面向普通开发者的机器学习入门
- Linux Shell经典面试题(其六)
- 机器学习PLA&Pocket algorithm实现（python）
- MyBatis简介
- tez 编译详解
- Java4Android笔记之Java中的抽象类和抽象函数
