-->

WEB资讯

您的当前位置:首页 > 资讯 > JS

js基础-浏览器地址-计时器-弹出层

2019-12-27 16:20:50  来源:admin 点击:828

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=timediv元素 
.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() 方法用于把数组中的所有元素放入一个字符串。


相关文章更多 >

© 2024版权所有 水水网

电话:171780793