弹框,滚动窗口,定时器,history对象

Posted 111wdh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹框,滚动窗口,定时器,history对象相关的知识,希望对你有一定的参考价值。

弹框的三种方式

window.alert("你好");//警示弹框

提示输入框

var num=window.prompt("请输入一个数:");

document.write(num);

确定取消框

var kuang=window.confirm("你确定要退出吗");

document.write(kuang);

if(kuang){              //kuang=true

window.close();    //关闭浏览器

}

滚动当前窗口的html文档:scrollBy,scrollTo

<input type="button" value="坐标移动by" onclick="myby()" />

<input type="button" value="坐标移动to" onclick="myto()" />

function myby(){

window.scrollBy(50,50);      //点击一下向下走50px

}

function myby(){

window.scrollTo(50,50);      //点击后滚动到指定坐标

}

定时器:设置定时器setInterval();(调用的方法名,每隔多少毫秒调用一次)

        删除定时器clearInterval();(需要清除的定时器的名字);

var i=0;

var j=setInterval(function(){

document.write("hello"+i);

i++;

if(i==10){

clearInterval(j);

}

},1000)           每隔一秒钟打印一次hello1-9,当i=10时不再打印

 

设置自动更新时间

<div id="q"></div>

var dingshiqi=setInterval(function(){

var date=new Date();

var hour=date.getHours();

var min=date.getMinutes();

var sec=date.getSeconds();

var str=hour+":"+min+":"+sec;

document.getElementById("q").innerHTML=str;

},1000);//自动刷新

 

history对象

back();     后退到上一个页面

forward();    前进到下一个页面

go(intValue);     可制定前进后退多个页面,正则进,负则退

第一个页面
<a href="page2.html">第二个页面</a>
<a href="javascript:history.forward()">前进</a>    跳转下一个页面

第二个页面
<a href="page3.html">第三个页面</a>
<a href="javascript:history.go(1)">前进</a>     跳转到第三个
<a href="javascript:history.go(-1)">后退</a>     跳转到第一个

第三个页面

<a href="javascript:history.back()">后退</a>     返回到第二个页面

前进后退键

 

location对象href:文档所在地址的url地址

可用于任何标签,跳转别的页面

<div class="" onclick="jump()" style="width: 100px;height: 100px;background-color: aqua;cursor: pointer;"><!-- 鼠标放上变小手cursor: pointer; -->
跳转
</div>

function jump(){
location.href="https://www.baidu.com";
}                                        点击div时跳转百度页面

以上是关于弹框,滚动窗口,定时器,history对象的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 计时器,History 对象(window),Location对象(window),Navigator对象

JavaScript-BOM

我在电脑本地搭建了IIS服务器,vue打包用的history模式,浏览器刷新就是404,请问我要怎么配置呢!

Web APIs——BOM

Web APIs——BOM

Java学习11