js基础-浏览器地址-计时器-弹出层
2019-12-27 16:20:50 来源:admin 点击:797
JavaScript Location(浏览器地址)
刷新当前页面
reload方法刷新当前页面
<span>当前时间:</span>
<script>
var d = new Date();
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.write(":");
document.write(d.getMilliseconds());
function refresh(){
location.reload();
}
</script>
<br>
<button onclick="refresh()">刷新当前页面</button>
跳转到另一个页面
<script>
function jump(){
//方法1
//location="/";
//方法2最大的不同是,assign会添加记录到浏览历史,点击后退可以返回之前页面
location.assign("/");
}
</script>
<br>
<button onclick="jump()">跳转到首页</button>
location的其他属性
协议 location.protocol
主机名 location.hostname
端口号 (默认是80,没有即表示80端口)location.port
主机加端口号 location.host
访问的路径 location.pathname
锚点 location.hash
参数列表 location.search:
JavaScript 弹出框
警告框
警告框 alert,常用于消息提示,比如注册成功等等
<script>
function register(){
alert("注册成功");
}
</script>
<br>
<button onclick="register()">注册</button>
确认框
确认框 confirm,常用于危险性操作的确认提示。 比如删除一条记录的时候,弹出确认框
confirm返回基本类型的Boolean true或者false
<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}
</script>
<br>
<button onclick="del()">删除</button>
输入框
输入框 prompt,用于弹出一个输入框,供用户输入相关信息。 因为弹出的界面并不好看,很有可能和网站的风格不一致,所以很少会在实际工作中用到。
<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>
<br>
<button onclick="p()">请输入用户名</button>
JavaScript 计时器
只执行一次
函数setTimeout(functionname, 距离开始时间毫秒数 );
通过setTimeout在制定的毫秒数时间后,执行一次 函数functionname ,本例在3秒钟后,打印当前时间。
解释:
document.getElementById 获取id=time的div元素
.innerHTML 修改该元素的内容
更多的关于如何获取元素,请参考 HTML DOM 获取元素
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
function showTimeIn3Seconds(){
setTimeout(printTime,3000); //3秒后执行pringTime方法
}
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>
不断重复执行
函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数,重复的时间间隔由第二个参数指定
<p>每隔1秒钟,打印当前时间</p>
<div id="time"></div>
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
var t = setInterval(printTime,1000);
</script>
<br><br>
终止重复执行
通过clearInterval()终止一个不断重复的任务
本例,当秒是5的倍数的时候,就停止执行
<p>每隔1秒钟,打印当前时间</p>
<div id="time"></div>
<script>
var t = setInterval(printTime,1000);
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
if(s%5==0)
clearInterval(t);
}
</script>
<br>
不要在setInterval调用的函数中使用document.write()
部分浏览器,比如firefox有这个问题,其他浏览器没这个问题。
假设setInterval调用的函数是printTime, 在printTime中调用document.write();只能看到一次打印时间的效果。
----------------------------------------------------------------------------------------------------------------------
输入:
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
输出:
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
join() 方法用于把数组中的所有元素放入一个字符串。