大家好,又见面了,我是你们的朋友全栈君。
1.Window对象
名称
history:有关客户访问过的URL的信息
location:有关当前URL的信息
screen:有关客户端的屏幕和显示性能的信息
常用方法
prompt():弹出输入框
alert():弹出警告框
confirm():弹出确认对话框
close():关闭浏览器窗口
open():
window.open(“弹出窗口的url”,”窗口名称”,”窗口特征”,)
setTimeout():计时
setInterval():计时
setTimeout和setInterval两者区别:setTimeout是定时程序,在什么时间做什么事情,setInterval是表示间隔一定时间反复执行某操作。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function open_adv() { window.open("adv.html"); } function open_fix_adv() { window.open("adv.html", "", "height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resize=0"); } function fullscreen() { window.open("adv.html", "", "fullscreen=yes"); } function close_plan() { window.close(); } </script> </head> <body> <input type="button" value="弹出窗口" onclick="open_adv();" /><br /> <input type="button" value="弹出固定大小的窗口,并且没有菜单栏等" onclick="open_fix_adv();" /><br /> <input type="button" value="全屏显示" onclick="fullscreen();" /><br /> <input type="button" value="关闭窗口" onclick="close_plan();" /> </body> </html>
运行结果
点击“弹出窗口”后
点击“弹出固定大小的窗口,并没有菜单栏等”后
点击“全屏显示”后
点击“关闭窗口”后,就可以关闭这个窗口了
2.history对象的常用方法
back():返回上一页
forward():前进一页
go():跳到指定页
history.back();后退一页
history.go(-1);后退1页,相当于“后退”按钮,等价于back()方法
3.location对象的常用属性和常用方法
常用属性
href:设置或返回url
如果没有登录,则跳转到登录页面
location.href=”login.html”;
常用方法
reload():重新加载
replace():用新的文档替换当前文档
4.Document对象的常用方法
referrer:返回载入当前文档的文档的URL
URL:返回当前文档的URL
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>领奖页面</title> </head> <body> <img src="img/d1.jpg" alt="中奖" /> <h1><a href="taobao.html">淘宝领奖了</a></h1> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>奖品显示页面</title> <script type="text/javascript"> document.write("链接来源:" + document.referrer + "<br/>"); document.write("当前网页文档的URL:" + document.URL); </script> </head> <body> <h2> 淘宝网的商品购买页面:笔记本!数码相机!</h2> </body> </html>
function changeLink(){ document.getElementById("node").innerHTML="搜狐"; } function showAllInput(){ var aInput=document.getElementsByTagName("input"); var sStr=""; for(var i=0;i<aInput.length;i++){ sStr+=aInput[i].value+"<br />"; } document.getElementById("s").innerHTML=sStr; } function showOneInput(){ var aInput=document.getElementsByName("season"); var sStr=""; for(var i=0;i<aInput.length;i++){ sStr+=aInput[i].value+"<br />"; } document.getElementById("s").innerHTML=sStr; }
运行结果:
第一个HTML代码显示的页面
点击“淘宝领奖了”之后,链接来源现实的是用document.referrer返回载入当前文档的文档的URL
当前网页文档的URL是使用document.URL返回当前文档的URL
第二个HTML显示的结果
如果没有前一个文档,链接来源不会返回载入当前文档的文档的URL,会显示空白
只会返回当前文档的URL
getElementById():返回对拥有指定id的第一个对象的引入
getElementById():返回带有指定名称的对象的集合
getElementById():返回带有指定标签名的对象的集合
write():向文档写入HTML表达式或JavaScript代码
5.制作复选框全选/全不选效果
分析:设置同名的复选框组,“全选”复选框设置唯一ID
利用getElementsByName()访问同名复选框组
使用getElementById()访问“全选”复选框
根据“全选”复选框的状态,设置同名复选框勾选状态(checked属性)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>全选/全不选效果</title> <style type="text/css"> .bg { background-image: url(img/list_bg.gif); background-repeat: no-repeat; width: 730px; } td { text-align: center; font-size: 13px; line-height: 25px; } body { margin: 0 } </style> <script type="text/JavaScript"> function check() { var oInput=document.getElementsByName("product"); for (var i=0;i<oInput.length;i++) { if (document.getElementById( "all").checked==true) { oInput[i].checked=true; } else { oInput[i].checked=false; } } } </script> </head> <body> <table border="0" cellspacing="0" cellpadding="0" class="bg"> <form action="" method="post"> <tr> <td style="height:40px;"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr style="font-weight:bold;"> <td><input id="all" type="checkbox" value="全选" onclick="check();" />全选</td> <td>商品图片</td> <td>商品名称/出售者/联系方式</td> <td>价格</td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> <tr> <td><input name="product" type="checkbox" value="1" /></td> <td><img src="img/list0.jpg" alt="alt" /></td> <td>杜比环绕,家庭影院必备,超真实享受<br /> 出售者:ling112233 <br /> <img src="img/online_pic.gif" alt="alt" /> <img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口价<br /> 2833.0 </td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> <tr> <td><input name="product" type="checkbox" value="2" /></td> <td><img src="img/list1.jpg" alt="alt" /></td> <td>NVDIA 9999GT 512MB 256bit极品显卡,不容错过<br /> 出售者:aipiaopiao110 <br /> <img src="img/online_pic.gif" alt="alt" /> <img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口价<br /> 6464.0 </td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> <tr> <td><input name="product" type="checkbox" value="3" /></td> <td><img src="img/list2.jpg" alt="alt" /></td> <td>精品热卖:高清晰,30寸等离子电视<br /> 出售者:阳光的挣扎 <br /> <img src="img/online_pic.gif" alt="alt" /> <img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口价<br /> 18888.0 </td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> <tr> <td><input name="product" type="checkbox" value="4" /></td> <td><img src="img/list3.jpg" alt="alt" /></td> <td>Sony索尼家用最新款笔记本 <br /> 出售者:疯狂的镜无 <br /> <img src="img/online_pic.gif" alt="alt" /> <img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口价<br /> 5889.0 </td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> </form> </table> </body> </html>
运行结果
全选
全不选
6.创建Date对象
var 日期实例=new Date(参数);
var tdate=new Date();
返回当前日期及时间
document.write(today);
7.Date对象的常用方法
getFullYear():获取年份
getMonth():获取月份(0-11)
getDate():获取号数(1-31)
getHours():获取小时数(0-23)
getMinutes():获取分钟数(0-59)
getSeconds():获取秒数(0-59)
getDay():获取星期几(0-6)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星期</title> <script type="text/javascript" src="js/xingqi.js"></script> </head> <body> </body> </html>
JavaScript代码
var today=new Date(); var weekday=today.getDate(); document.write("今天星期"+weekday); switch(weekday) { case 5: document.write(" finally Day!"); break; case 6: document.write(" super Day!"); break; case 0: document.write(" sleepy Day!"); break; default: document.write(" I'm looking forward to this weeked."); }
运行结果
8.今天遇到的问题
今天遇到一个问题用css怎么改变下拉列表select框的默认样式,我百度了一下,解决了这个问题
代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #parent{ background:#CCCCCC no-repeat; width: 100px; height: 30px; overflow: hidden; } #parent select{ background: transparent;//背景设置为透明 border: none; padding-left: 10px; width: 120px; height: 100%; } </style> </head> <body> <div id="parent"> <select> <option>今天星期一</option> <option>今天星期二</option> <option>今天星期三</option> </select> </div> </body> </html>
我们需要为其添加一个父容器,容器是用来覆盖小箭头的,然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的css属性超出部分不可见,即可覆盖小箭头,然后再为父级添加背景图片即可。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155249.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...