打开、关闭窗口
•open
–蓝色理想运行代码功能
•close
–关闭时提示问题
常用属性
•window.navigator.userAgent
•window.location
窗口尺寸、工作区尺寸
•可视区尺寸
–document.documentElement.clientWidth
–document.documentElement.clientHeight
滚动距离
–document.body.scrollTop
–document.documentElement.scrollTop
常用方法和事件
l系统对话框
•警告框：alert(“内容”)，没有返回值
•选择框：confirm(“提问的内容”)，返回boolean
•输入框：prompt()，返回字符串或null
window对象常用事件
•onload 窗口js加载
•onscroll 窗口滚动条
•onresize 窗口改变大小后触发
•例子：回到顶部按钮、侧边栏广告
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>回到顶部按钮</title> <style> body{ background:#990;} body input{ background:#066; text-height:5; float:right;} </style> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var bSys=true; var timer=null; //判断滚动条真假值！设滚动条默认事件为真 window.onscroll=function(){ if(!bSys) {clearInterval(timer);} bSys=false; }; oBtn.onclick=function() { timer=setInterval(function(){ // 获取滚动条处理兼容问题 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //计算速度 var iSpeed=Math.floor(-scrollTop/8); //判断滚动条里浏览器距离是否为0; if(scrollTop==0){clearInterval(timer)}; //浏览器恢复默认继续运行 bSys=true; document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed; },30) } } </script> </head> <body>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br />76<br />77<br />78<br />79<br />80<br />81<br />82<br />83<br />84<br />85<br />86<br />87<br />88<br />89<br />90<br />91<br />92<br />93<br />94<br />95<br />96<br />97<br />98<br />99<br />100<br />101<br />102<br />103<br />104<br />105<br />106<br />107<br />108<br />109<br />110<br />111<br />112<br />113<br />114<br />115<br />116<br />117<br />118<br />119<br />120<br />121<br />122<br />123<br />124<br />125<br />126<br />127<br />128<br />129<br />130<br />131<br />132<br />133<br />134<br />135<br />136<br />137<br />138<br />139<br />140<br />141<br />142<br />143<br />144<br />145<br />146<br />147<br />148<br />149<br />150<br />151<br />152<br />153<br />154<br />155<br />156<br />157<br />158<br />159<br />160<br />161<br />162<br />163<br />164<br />165<br />166<br />167<br />168<br />169<br />170<br />171<br />172<br />173<br />174<br />175<br />176<br />177<br />178<br />179<br />180<br />181<br />182<br />183<br />184<br />185<br />186<br />187<br />188<br />189<br />190<br />191<br />192<br />193<br />194<br />195<br />196<br />197<br />198<br />199<br />200<br />201<br />202<br />203<br />204<br />205<br />206<br />207<br />208<br />209<br />210<br />211<br />212<br />213<br />214<br />215<br />216<br />217<br />218<br />219<br />220<br />221<br />222<br />223<br />224<br />225<br />226<br />227<br />228<br />229<br />230<br />231<br />232<br />233<br />234<br />235<br />236<br />237<br />238<br />239<br />240<br />241<br />242<br />243<br />244<br />245<br />246<br />247<br />248<br /> <br />126<br />127<br />128<br />129<br />130<br />131<br />132<br />133<br />134<br />135<br />136<br />137<br />138<br />139<br />140<br />141<br />142<br />143<br />144<br />145<br />146<br />147<br />148<br />149<br />150<br />151<br />152<br />153<br />154<br />155<br />156<br />157<br />158<br />159<br />160<br />161<br />162<br />163<br />164<br />165<br />166<br />167<br />168<br />169<br />170<br />171<br />172<br />173<br />174<br />175<br />176<br />177<br />178<br />179<br />180<br />181<br />182<br />183<br />184<br />185<br />186<br />187<br />188<br />189<br />190<br />191<br />192<br />193<br />194<br />195<br />196<br />197<br />198<br />199<br />200<br />201<br />202<br />203<br />204<br />205<br />206<br />207<br />208<br />209<br />210<br />211<br />212<br />213<br />214<br />215<br />216<br />217<br />218<br />219<br />220<br />221<br />222<br />223<br />224<br />225<br />226<br />227<br />228<br />229<br />230<br />231<br />232<br />233<br />234<br />235<br />236<br />237<br />238<br />239<br />240<br />241<br />242<br />243<br />244<br />245<br />246<br />247<br />248<br /> <input id="btn1" type="button" value="回到顶部" /> </body> </html>
侧边栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页侧边栏</title> <style> #div1 {100px; height:100px; background:red; position:absolute; right:0; top:0;} </style> <script> //调成窗口大小事件 = 系统执行完事件= 滚动条事件 window.onresize=window.onload=window.onscroll=function() { var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2; startMove(oDiv, {top:scrollTop+t}); } //获取非行间样式函数封装！ function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } // 获取对象，json封装要实现的属性 function startMove(obj, json, fn) { //关闭定时器 clearInterval(obj.timer); //开定时器 obj.timer=setInterval(function(){ //设置第一次循环，所以的值都到达了！ var bStop=true; //循环json里的属性和各个属性的值 for(var attr in json) { //取当前值 var iCur=0; //判断属性是否为透明度 处理兼容问题 if(attr=='opacity') { iCur=parseInt(parseFloat(getStyle(obj, attr))*100); } else { iCur=parseInt(getStyle(obj, attr)); } //算速度 var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //检查停止 //当前值不等于属性值则执行bstop为假，继续循环 if(iCur!=json[attr]) { bStop=false; } //处理透明度问题 if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else { obj.style[attr]=iCur+iSpeed+'px'; } } //判断属性值是否为真 if(bStop) { //关闭obj的定时器 clearInterval(obj.timer); //判断函数里是否有待执行的函数 为真则执行 if(fn) { fn(); } } },30) } </script> </head> <body style="height:2000px;"> <div id="div1"> </div> </body> </html>
–闪烁问题