社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
属性名称 | 说明 |
history | 有关客户访问过的URL的信息 |
location | 有关当前 URL 的信息 |
语法:
window.属性名= "属性值"
示例:
window.location="http://www.baidu.com" ; 【表示跳转到百度首页】
方法名称 | 说明 |
prompt( ) | 显示可提示用户输入的对话框 |
alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
close( ) | 关闭浏览器窗口 |
open( ) | 打开一个新的浏览器窗口,加载给定 URL 所指定的文档 |
setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 |
setInterval( ) | 按照指定的周期(以毫秒计)来调用函数或表达式 |
①confirm( ):将弹出一个确认对话框
confirm("对话框中显示的纯文本")
示例:
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗?");
if(flag==true)
alert("删除成功!");
else
alert("你取消了删除");
</script>
alert( ):一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变
prompt( ):两个参数,输入对话框,用来提示用户输入一些信息,单击“取消”按钮则返回null,单击“确定”按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息
confirm( ):一个参数,确认对话框,显示提示对话框的消息、“确定”按钮和“取消”按钮,单击“确定”按钮返回true,单击“取消”按钮返回false,因此与if-else语句搭配使用
②open( ):打开弹出网页
window.open("弹出窗口的url","窗口名称","窗口特征”)
窗口特征:
属性名称 | 说明 |
height、width | 窗口文档显示区的高度、宽度。以像素计 |
left、top | 窗口的x坐标、y坐标。以像素计 |
toolbar=yes | no | 1 | 0 | 是否显示浏览器的工具栏。黙认是yes |
scrollbars=yes | no | 1 | 0 | 是否显示滚动条。黙认是yes |
location=yes | no | 1 | 0 | 是否显示地址地段。黙认是yes |
status=yes | no | 1 | 0 | 是否添加状态栏。黙认是yes |
menubar=yes | no | 1 | 0 | 是否显示菜单栏。黙认是yes |
resizable=yes | no | 1 | 0 | 窗口是否可调节尺寸。黙认是yes |
titlebar=yes | no | 1 | 0 | 是否显示标题栏。黙认是yes |
fullscreen=yes | no | 1 | 0 | 是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式 |
③close( ):网页的关闭
window. close( );
名称 | 说明 |
back( ) | 加载 history 对象列表中的前一个URL |
forward( ) | 加载 history 对象列表中的下一个URL |
go( ) | 加载 history 对象列表中的某个具体URL |
方法中的等价关系:
名称 | 说明 |
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或返回当前URL的主机名 |
href | 设置或返回完整的URL |
名称 | 说明 |
reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
主页面使用href实现跳转和刷新本页
示例:
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>
名称 | 说 明 |
referrer | 返回载入当前文档的URL |
URL | 返回当前文档的URL |
document.referrer
document.URL
判断页面是否是链接进入
自动跳转到登录页面
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入,5秒后将自动 跳转到登录页面</h2>");
setTimeout("javascript:location.href='login.html'",5000); 【通过周期函数跳转】 }
名称 | 说 明 |
getElementById() | 返回对拥有指定id的第一个对象的引用【对象的id唯一】 |
getElementsByName() | 返回带有指定名称的对象的集合【相同name属性】 |
getElementsByTagName() | 返回带有指定标签名的对象的集合【相同的元素】 |
write() | 向文档写文本、HTML表达式或JavaScript代码 |
动态改变层、标签中的内容:
document.getElementById("book").innerHTML="现象级全球畅销书";
访问相同name的元素:
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" "; }
document.getElementById("replace").innerHTML=sStr;
访问相同标签的元素:
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" "; }
document.getElementById("replace").innerHTML=sStr;
1. Array:用于在单独的变量名中存储一系列的值
2. String:用于支持对字符串的处理
3. Math:用于执行常用的数学任务,它包含了若干个数字常量和函数
方法 | 说明 | 示例 |
ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
floor() | 对数进行下舍入 | Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
round() | 把数四舍五入为最接近的数 | Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
random() | 返回0~1之间的随机数 | Math.random();例如:0.6273608814137365 |
示例:随机选择颜色
function selColor(){
var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
var num=Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num]; }
4. Date:用于操作日期和时间:
var 日期对象=new Date(参数)
参数格式:MM DD,YYYY,hh:mm:ss
例如:
Var today=new Date( ); //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12");
Date对象的方法:
方法 | 说 明 |
getDate() | 返回 Date 对象的一个月中的每一天,其值介于1~31之间 |
getDay() | 返回 Date 对象的星期中的每一天,其值介于0~6之间 |
getHours() | 返回 Date 对象的小时数,其值介于0~23之间 |
getMinutes() | 返回 Date 对象的分钟数,其值介于0~59之间 |
getSeconds() | 返回 Date 对象的秒数,其值介于0~59之间 |
getMonth() | 返回 Date 对象的月份,其值介于0~11之间 |
getFullYear() | 返回 Date 对象的年份,其值为4位数 |
getTime() | 返回自某一时刻(1970年1月1日)以来的毫秒数 |
制作时钟特效:
使用Date对象的方法显示当前时间的小时、分钟和秒
示例:
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
//获得小时、分钟、秒数
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss; }
disptime();
<div id="myclock"></div>
①setTimeout( )
语法:setTimeout("调用的函数",等待的毫秒数)
示例:
最终代码:
<input name="s" type="button" value="显示提示消息" οnclick="timer()" />
<script>
function timer(){
var t=setTimeout("alert('3 seconds')",3000);
}
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在的时间是:"+hh+":"+mm+":"+ss;
var myTime=setTimeout("disptime() ", 1000 ); }
disptime()
【如果要多次调用,使用setInterval( )或者让disptime( )自身再次调用setTimeout( )】
</script>
②setInterval( )
语法:setInterval("调用的函数",间隔的毫秒数)
示例:
<div id="myclock"></div>
<input name="s" type="button" value="显示提示消息" οnclick="timer()" />
<script>
function timer(){
var t= setInterval ("alert('3 seconds')",3000);
}
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在的时间是:"+hh+":"+mm+":"+ss; }
var myTime=setInterval ("disptime() ", 1000 );
</script>
语法:clearTimeout(setTimeOut()返回的ID值)
示例:
var myTime=setTimeout("disptime() ", 1000 );
clearTimeout(myTime);
语法:clearInterval(setInterval()返回的ID值)
示例:
var myTime=setInterval("disptime() ", 1000 );
clearInterval(myTime);
总结:
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!