慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

牛逼不哄哄
Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
```
location.[属性|方法]
```
location对象属性图示:
![20180525152722273575715.png](http://ohfvjymgx.bkt.clouddn.com/20180525152722273575715.png)
location对象属性
![2018052515272227516719.png](http://ohfvjymgx.bkt.clouddn.com/2018052515272227516719.png)
location对象方法
![20180525152722280591221.png](http://ohfvjymgx.bkt.clouddn.com/20180525152722280591221.png)
查看全部

0 采集收起来源：Location对象
2018-05-25
牛逼不哄哄
返回下一个浏览的页面
forward()方法，加载 history 列表中的下一个 URL。
```
window.history.forward();
```
注意：等价点击前进按钮。
注意：等价点击前进按钮。
查看全部

0 采集收起来源：返回下一个浏览的页面
2018-05-25
牛逼不哄哄
返回浏览历史中的其他页面
go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。
```
window.history.go(number);
```
参数：
![2018052515272225684852.png](http://ohfvjymgx.bkt.clouddn.com/2018052515272225684852.png)

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下
```
window.history.go(-2);
```
注意：和在浏览器中单击两次后退按钮操作一样。
查看全部

0 采集收起来源：返回浏览历史中的其他页面
2018-05-25
牛逼不哄哄
返回前一个浏览的页面
back()方法，加载 history 列表中的前一个 URL。
```
window.history.back();
```
注意：等同于点击浏览器的倒退按钮。
back()相当于go(-1),代码如下:
```
window.history.go(-1);
```
查看全部

0 采集收起来源：返回前一个浏览的页面
2018-05-25
牛逼不哄哄
History 对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
```
window.history.[属性|方法]
```
注意：window可以省略。
History 对象属性
- length：返回浏览器历史列表中的url数量
History 对象方法
![20180525152722229116278.png](http://ohfvjymgx.bkt.clouddn.com/20180525152722229116278.png)
查看全部

0 采集收起来源：History 对象
2018-05-25

牛逼不哄哄

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

clearTimeout(id_of_setTimeout)

参数说明

1- id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById('txt').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

查看全部

0 采集收起来源：取消计时器clearTimeout()

2018-05-25

牛逼不哄哄

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

setTimeout(代码,延迟时间);

参数说明

1- 要调用的函数或要执行的代码串。

2- 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

示例：

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;
    setTimeout(startCount, 1000);
  }
  setTimeout(startCount, 1000);
</script>
</head>
<body>
<form>
<input type="text" id="count" />
</form>
</body>
</html>

查看全部

0 采集收起来源：计时器setTimeout()

2018-05-25

牛逼不哄哄

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

clearInterval(id_of_setInterval)

参数说明:

1- id_of_setInterval：由 setInterval() 返回的 ID 值。

示例

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }// 每隔100毫秒调用clock函数，并将返回值赋值给i
     var i=setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();              
      document.getElementById("clock").value = time;
   }
   timer = setInterval(clock, 1000);
    
    function ccIt(){
        clearInterval(timer);
    }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop"  onclick="ccIt()"/>
  </form>
</body>
</html>

查看全部

0 采集收起来源：取消计时器clearInterval()

2018-05-25

牛逼不哄哄

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

setInterval(代码,交互时间);

参数说明：

1- 代码：要调用的函数或要执行的代码串。

2- 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用格式

setInterval("clock()",1000)
或
setInterval(clock,1000)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
  var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
  </form>
</body>
</html>

查看全部

0 采集收起来源：计时器setInterval()

2018-05-25

慕容0368030

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程控制语句</title>
<script type="text/javascript">
var infos=[['小A','女','21','大一'],['小B','男','23','大三'],['小C','男','24','大四'],['小D','女','21','大一'],
           ['小E','女','22','大二'],['小F','男','21','大一'],['小G','女','22','大二'],['小H','女','20','大三'],
           ['小I','女','20','大一'],['小J','男','20','大三']];//第一步把之前的数据写成一个数组的形式,定义变量为 infos
var arr=new Array();
var n=0;
for(var i=0;i<infos.length;i++){
   if(infos[i][3]=='大一'){
     document.write(infos[i]+"<br />"); //第一次筛选，找出都是大一的信息
     arr[n]=infos[i];
     n++;
   }
}
document.write("<br>"+"第二次筛选："+"<br>");
for(var n=0;n<arr.length;n++){
    if(arr[n][1]=='女'){
          document.write(arr[n][0]+"<br/>");
        }
}
//第二次筛选，找出都是女生的信息
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2018-05-25
牛逼不哄哄

JavaScript 计时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：
![20180525152721708910672.png](http://ohfvjymgx.bkt.clouddn.com/20180525152721708910672.png)

查看全部

0 采集收起来源：JavaScript 计时器
2018-05-25
牛逼不哄哄

window对象
window对象是BOM的核心，window对象指当前的浏览器窗口。
window对象方法:
![20180525152721677680414.png](http://ohfvjymgx.bkt.clouddn.com/20180525152721677680414.png)

查看全部

0 采集收起来源：window对象
2018-05-25
Silvermoon丶

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
.tabs-btn{
height:30px;
}
.tabs-body input{
display:block;
float:left;
margin-right:8px;
font-size:14px;
height:30px;
width:60px;
background:none;
border:1px solid #eee9e9;
color:black;
cursor:pointer;
outline:none;
}
#text-body div{
display:absolute;
width:300px;
font-size:14px;
border:1px solid #eee9e9;
color:black;
border-top:2px solid red;
}
.tabs-body input.on{
background:red;
border-top:2px solid red;
border-bottom:none;
}
.hide{
display:none;
}

</style>
<script type="text/javascript">

// JS实现选项卡切换
window.onload = function (){
var btn = document.getElementsByTagName("input");
var texbody = document.getElementById("text-body");
var tabtext = texbody.getElementsByTagName("div");
for(var i=0;i<btn.length;i++){
btn[i].index = i;
btn[i].onclick=function(){
for(var n=0;n<btn.length;n++){
btn[n].className="";
tabtext[n].className="hide";
}
this.className="on";
tabtext[this.index].className="";
}
}
}
</script>

</head>
<body>

<div class="tabs-body">
<div class="tabs-btn">
<input class="on" id="btn1" type="button" value="房产"/>
<input id="btn2" type="button" value="家居"/>
<input id="btn3" type="button" value="二手房"/>
</div>
<div id="text-body">
<div class="">
<p>
 275万购昌平邻铁三居总价20万买一居<br>
 200万内购五环三居 140万安家东三环<br>
 北京首现零首付楼盘 53万购东5环50平<br>
 京楼盘直降5000 中信府公园楼王现房<br>
</p>
</div>
<div class="hide">
<p>
 40平出租屋大改造美少女的混搭小窝<br>
 经典清新简欧爱家 90平老房焕发新生<br>
 新中式的酷色温情 66平撞色活泼家居<br>
 瓷砖就像选好老婆卫生间烟道的设计<br>
</p>
</div>
<div class="hide">
<p>
 通州豪华3居260万二环稀缺2居250w甩<br>
 西3环通透2居290万 130万2居限量抢购<br>
 黄城根小学学区仅260万 121平70万抛!<br>
 独家别墅280万苏州桥2居优惠价248万<br>
</p>
</div>
</div>
</div>

</body>
</html>

查看全部

0 采集收起来源：编程挑战
2018-05-25
慕数据7366584

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>location</title>
</head>
<script type="text/javascript">
var h = window.location.href;
document.write(h);
</script>
<body>
</body>
</html>

//获取当前文档的url并输出

查看全部

0 采集收起来源：Location对象
2018-05-24
慕数据7366584

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
    <input type="text" id="count" />
    <input type="button" value="Start" onclick="startCount()"/>
    <input type="button" value="Stop" onclick="stopCount()" />
</form>
</body>
</html>

//计时器的开始与停止

查看全部

0 采集收起来源：取消计时器clearTimeout()
2018-05-24