慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

你是漂亮的天蓝色

JS的location对象：location.[属性|方法]
location对象的方法：
1）location.assign(); 加载新文档
2）location.reload(); 重新加载当前文档
3）location.replace(); 用新的文档替换当前文档
location对象属性：

查看全部

0 采集收起来源：Location对象
2019-04-27
你是漂亮的天蓝色

JS的history对象：
window.history.[属性|方法] window可以省略
history对象记录用户曾经浏览过的页面（URL），并可以实现浏览器前进与后退相似导航的功能
从窗口被打开的一刻开始，每个浏览器窗口、每个标签页及每个框架，都有自己的history对象与特定的window对象关联
history对象的属性：history.length; f返回浏览器历史列表中的URL数量
history对象的方法：
1）window.history.back(); 返回前一个浏览的页面，加载history列表的前一个URL，相当于window.history.go(-1);
2）window.history.forward(); 返回下一个浏览的页面，加载history列表的下一个URL，相当于window.history.go(1);
3）window.history.go(number); 根据当前所处的页面，加载history列表中的某一个具体的页面
number是要访问的URL在history的URL列表中的相对位置，如1表示下一个相当于forward()，0表示当前页，-1表示上一个页面相当于back()

查看全部

0 采集收起来源：History 对象
2019-04-27
你是漂亮的天蓝色

JS计时器：
1）setInterval(代码，交互时间); 在执行时，从载入页面后每隔指定的时间执行代码
代码：要调用的函数或执行的代码串
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）
返回值是一个可以传递给clearInterval()从而取消对代码周期性执行的值
调用函数的格式（假设有一个clock()函数）：setInterval("clock()",1000) 或· setInterval(clock,1000)
2）clearInterval(setInterval()返回的值); 取消由setInterval()设置的交互时间
如：
function clock(){……}
var i=setInterval(clock,1000);
clearInterval(i);
3）setTimeout(代码，延迟时间); 在载入后延迟指定的时间后，去执行一次表达式，仅执行一次
代码：要调用的函数或执行的代码串
延迟时间：在执行代码前需等待的时间，以毫秒计（1s=1000ms）

当我们打开网页3秒后，在弹出一个提示框，代码如下:
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>

当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
</script>
<input type="button" value="start" onClick="tinfo()">

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
</script>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
4）clearTimeout(setTimeout()的返回值); setTimeout和clearTimeout一起使用，停止计时器
下面的例子和上节的无穷循环的例子相似，现在我们添加了一个 "Stop" 按钮来停止这个计数器：
<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>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">

查看全部

0 采集收起来源：取消计时器clearTimeout()
2019-04-27
大哥哥a
计时器setInterval()
语法:
```
setInterval(代码,交互时间);
```
查看全部

0 采集收起来源：计时器setInterval()
2019-04-27
慕雪9186590

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
ul{list-style-type: none;}
a{text-decoration: none;}

#tab-list{width: 275px;height:190px;margin: 20px auto;}

#ul1{border-bottom: 2px solid #8B4513;height: 32px;}
#ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
#ul1 li:hover{cursor: pointer;}
#ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

#tab-list div{border: 1px solid #7396B8;border-top: none;}
#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

.show{display: block;}.hide{display: none;}

</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function() {
var aLi = document.getElementById("ul1").getElementsByTagName("li");
var aDiv = document.getElementById("tab-list").getElementsByTagName("div");//内容
for(var i = 0; i < aLi.length; i++) { //遍历头部
aLi[i].index = i;
aLi[i].onmouseover = function() { //鼠标事件
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
aDiv[this.index].className = "show";
}
}
}



</script>

</head>
<body>

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

查看全部

0 采集收起来源：编程挑战
2019-04-27
慕雪9186590

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var tr = document.getElementsByTagName('tr');
for(var i=0;i<tr.length;i++)
{
bgChange(tr[i]);
} function bgChange(obj) { obj.onmouseover=function() { obj.style.backgroundColor = '#f2f2f2';} obj.onmouseout=function(){ obj.style.backgroundColor = '#fff';} }}
只能这种调用外边的函数形式改变背景颜色，不能直接
tr[i].onmouseover=function()
{
tr[i].style.backgroundColor = '#f2f2f2';
}
因为参数传递问题，tr[i]是传不进去函数的，在function 内把它改成this 就行了

查看全部

0 采集收起来源：编程练习
2019-04-26
你是漂亮的天蓝色

JS的Array对象
Array的属性：ary.length
Array的方法：
1)arr.concat(arr1,arr2,……,arrn) 连接两个及以上的数组，返回连接后的数组；此方法不会改变现有的所有元素arr1……arrn，仅返回被连接数组的一个副本
如：<script type="text/javascript">
var mya = new Array(3);
mya[0] = "1";
mya[1] = "2";
mya[2] = "3";
document.write(mya.concat(4,5)+"<br>");
document.write(mya);
</script>
运行结果：
1,2,3,4,5
1,2,3
而且数组间以及同一数组的不同元素间都用“，”隔开
如：
<script type="text/javascript">
var mya1= new Array("hello!")
var mya2= new Array("I","love");
var mya3= new Array("JavaScript","!");
var mya4=mya1.concat(mya2,mya3);
document.write(mya4);
</script>
运行结果：
hello!,I,love,JavaScript,!
2）arr.join(分隔符) 将数组中的所有元素放入一个字符串，元素通过指定的分隔符进行分隔，可选，若省略则使用逗号作为分隔符；此方法不影响数组原本的内容
<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join("."));
</script>
运行结果：
I.love.JavaScript
3）arr.reverse() 用于颠倒数组元素的顺序，该方法会改变原来的数组，而不会创建新的数组
<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "1"
myarr[1] = "2"
myarr[2] = "3"
document.write(myarr + "<br />")
document.write(myarr.reverse())
</script>
运行结果：
1,2,3
3,2,1
4）arr.slice(start,end可选) 返回一个新的数组，包含从start到end-1位置的arr中的元素，该方法不会修改数组，而是返回一个子数组
若使用负值表示从结尾开始，-1表示最后一个元素
<script type="text/javascript">
var myarr = new Array(1,2,3,4,5,6);
document.write(myarr + "<br>");
document.write(myarr.slice(2,4) + "<br>");
document.write(myarr);
</script>
运行结果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6
5）arr.sort(方法函数) 使数组中的元素按照一定的顺序排序
方法函数可选，若不指定则按unicode码顺序排序
若指定方法函数，则按方法函数所指的排序方法排序arr.sort(method)
该方法函数要比较两个数，然后返回一个用于说明两个值相对顺序的数字，若返回值<=-1,表示排序后参数a在参数b的前面
若返回值<1 && >-1,表示参数a和参数b具有相同的排序顺序
若返回值>=1,表示排序后参数a在参数b的后面
<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序，如降序，把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>
运行结果：
80,16,50,6,100,1
1,6,16,50,80,100

查看全部

0 采集收起来源：编程练习
2019-04-26
你是漂亮的天蓝色

JS的Math对象不需要创建，直接使用即可
Math的属性：Math.PI等
Math的方法：Math.abs() Math.sqrt() Math.max() Math.pow()等
1）Math.ceil() 向上取整
2）Math.floor() 向下取整
3）Math.round() 四舍五入，若x距离左右两个整数相等，就选接近正无穷方向的那个整数
4）Math.random() 返回介于[0-1）之间的随机数

查看全部

0 采集收起来源：随机数 random()
2019-04-26
你是漂亮的天蓝色

JS中字符串的属性方法：

属性：str.length 返回字符串的长度

方法：
1）str.toUpperCase()/str.toLowerCase() 将字符串小写字母转换成大写/大写字母转换成小写
2）str.charAt(index) 返回指定位置的值，index是从0到str.length-1的值，超过这个范围将返回一个空字符串
3）str.indexOf(substr,start) 返回指定的字符串首次出现的位置，start若省略则将从首字符开始检索，若在str中未找到子串substr，则返回 -1
若想要检索某个字符第二次出现的位置：
document.write(mystr.indexOf("o",mystr.indexOf("o")+1)); //从第一个“o”的下一个字符的位置开始检索得到的第一个“o”的位置就相当于总体上第二个“o”的位置
4）str.split(用于分隔的字符，分隔的次数可选)
var mystr = "www.imooc.com";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");
运行结果:
www,imooc,com
www,imooc
5）str.substring(start,stop) 提取子串 stop可选
返回的内容是从start开始到stop-1的位置的所有字符，其长度为stop-start；
若start和stop相等，就返回一个空字符串；
若start>stop，该方法在提取子串前会先交换这两个参数
6）str.substr(start,length) 提取指定数目的字符，start为起始位置，length为提取字符串的长度（可选）
若start是负数，就从字符串的尾部开始算起，即-1表示字符串最后一个字符，-2表示倒数第二个
若start为负，且绝对值大于字符串长度，则将start视为0

查看全部

0 采集收起来源：提取指定数目的字符substr()
2019-04-26
慕田峪1355337

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");

// 任务1
for(var i=0;i<hobby.length;i++){
hobby[i].checked='true';
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");

// 任务2
for(var i=0;i<hobby.length;i++){
hobby[i].checked='';
}

}

function checkone(){
var j=document.getElementById("wb").value;
var hobby = document.getElementsByName("hobby");

// 任务3
switch(j){
case '1':
hobby[0].checked='true';
break;
case '2':
hobby[1].checked='true';
break;
case '3':
hobby[2].checked='true';
break;
case '4':
hobby[3].checked='true';
break;
case '5':
hobby[4].checked='true';
break;
case '6':
hobby[5].checked='true';
break;
}
}

</script>
</body>
</html>

查看全部

1 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2019-04-26
SHh_Wt

JavaScript数组的length属性是可变的，这一点需要特别注意

查看全部

0 采集收起来源：了解成员数量(数组属性length)
2019-04-26
SHh_Wt

数组的长度，即数组中元素的个数。

查看全部

0 采集收起来源：了解成员数量(数组属性length)
2019-04-26

你是漂亮的天蓝色

JS中“getDay()”返回星期，返回的是0-6的数字，0表示星期天

var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中  
document.write("今天是："+ weekday[mynum]);//输出星期几

查看全部

0 采集收起来源：返回星期方法

2019-04-26

慕田峪1355337

<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<h1>操作成功</h1>
<p><span id="sp"></span>秒后回到主页<a id="aa" href="#">返回</a></p>


<script type="text/javascript">
var sp=document.getElementById('sp');
var i=5;
var t=setInterval(num,1000)
function num(){
sp.innerHTML=i;
i--;
if(i==0){
i=5;
window.open('https://www.baidu.com');
clearInterval(t);
}
}
document.getElementById('aa').onclick=function(){
window.history.back();
}
//获取显示秒数的元素，通过定时器来更改秒数。

//通过window的location和history对象来控制网页的跳转。

</script>
</body>
</html>

查看全部

2 采集收起来源：编程练习
2019-04-26

首页上一页 396 397 398 399 400 401 402 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面

JavaScript进阶篇

计时器setInterval()