慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

qq_慕设计1278587

这个注意不要粗心打错代码，加油，好好学习

查看全部

0 采集收起来源：编程练习
2019-08-25
宝慕林5689754
变量声明
Var还可以一次声明多个变量，变量之间用","逗号隔开。
```
var num1,mun2 ;
num1=1;num2=2
```
注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。
var不写也行
查看全部

0 采集收起来源：确定你的存在(变量声明)
2019-08-25

宝慕林5689754

给变量取个名字(变量命名)

必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。

错误:  6num  //开头不能用数字
  %sum //开头不能用除(_ $)外特殊符号,如(%  + /等)
  sum+num //开头中间不能使用除(_ $)外特殊符号，如(%  + /等)

不允许使用JavaScript关键字和保留字做变量名。

查看全部

0 采集收起来源：给变量取个名字(变量命名)

2019-08-25

qq_阿龙_12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航页面</title>
<link href="favicon.ico" rel="shortcut icon"/>
<style type="text/css">
*{margin:0; padding:0; text-decoration:none; border:0;}
body{background-image:url(http://image.tianjimedia.com/uploadImages/2012/273/SYJ43SG47PC8_NatGeo04.jpg); background-size:cover; transition:2s;}
#box{width:70%; height:200px; margin:20px auto; box-shadow:0 0 20px #000 inset; transition:0.2s;}
#box:hover{background-color:#000; opacity: 0.7;}
#box p{line-height:200px; text-align:center; font-size:72px; color:#000;}
#box a:hover p{color:#fff;}
#vice-box{width:70%; margin:20px auto; transition:0.2s;}
#limit{width:100%; overflow:hidden;}
#site{width:24%; height:150px; float:left; margin-left:0.5%; margin-right:0.5%; margin-top:5px; margin-bottom:5px; box-shadow:0 0 20px #000 inset; transition:1s;}
#site:hover{background-color:#000; opacity: 0.7;}
#site p{line-height:150px; text-align:center; font-size:36px; color:#000;}
#site a:hover p{color:#fff;}
#author{width:70%; height:50px; margin:0 auto;}
#name{display:block; width:30%; line-height:50px; margin:0 auto; text-align:center; color:#000; font:15px; transition:2s; cursor:pointer;}
#name:hover{color:#fff;}
#MrH{position:relative; top:5px; width:70%; margin:0 auto; z-index:1;}
#MrH img{position:relative; width:100%; height:0; z-index:1;}
#MrH p{position:absolute; display:inline-block; background-color:#000; opacity:0.8; width:50px; height:25px; line-height:25px; text-align:center; bottom:5px; right:5px; z-index:10; color:#fff; cursor:pointer; transition:1s;}
#MrH p:hover{opacity:1;}
#button{display:inline-block; width:100px; height:50px; position:fixed; right:50px; top:20px; opacity:0.7;color:#fff; cursor:pointer;}
#next{position:relative; float:right; width:50px; text-align:center; line-height:50px; font-size:25px; right:0; background-color:#000;}
#next:hover{opacity:0.9;}
#prev{position:relative; float:left; width:50px; text-align:center; line-height:50px; font-size:25px; left:0; background-color:#000;}
#prev:hover{opacity:0.9;}
</style>
<script type="text/javascript">
var BGI=9;
window.onload=function anonymous(){
var name=document.getElementById("name");
var hiden=document.getElementById("hiden");
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var page=document.getElementById("page");
var box=document.getElementById("box");
var Vbox=document.getElementById("vice-box");
var button=document.getElementById("button");
var name=document.getElementById("name");
var maxImage=19;
var height=0;

name.onclick=function drop(){
if(height<450){
height+=1;
document.getElementById("photo").style.height=height+"px";
}
setTimeout(drop,1);
}

hiden.onclick=function cover(){
if(height>=0){
height-=1;
document.getElementById("photo").style.height=height+"px";
}
setTimeout(cover,1);
}

prev.onclick=function(){
alert("抱歉，此页面暂时无法更换背景图。");
}
next.onclick=function(){
BGI++;
if(BGI>maxImage){
BGI=1;
}
alert("抱歉，此页面暂时无法更换背景图。");
}
function width(){
if(document.body.offsetWidth<971){
box.style.width="970px";
Vbox.style.width="970px";
button.style.right="0px";
name.style.width="290px";
}else{
box.style.width="70%";
Vbox.style.width="70%";
button.style.right="50px";
name.style.width="30%";
}
}
setInterval(width,500);
}
</script>
</head>

<body id="page">
<div id="MrH">
<a href="http://user.qzone.qq.com/1842452856/main" target="_blank" ><img title="点击进入我的空间" id="photo" src="http://image.3001.net/images/new/pic-hk.jpg"></a>
<p id="hiden">hiden</p>
</div>
<div id="button">
<p id="next" title="下一张背景图">></p>
<p id="prev" title="上一张背景图"><</p>
</div>
<div id="box">
<a href="http://www.baidu.com/" target="_new"><p>Baidu</p></a>
</div>
<div id="vice-box">
<div id="limit">
<div id="site">
<a href="http://www.youku.com/" target="_blank"><p>Youku</p></a>
</div>
<div id="site">
<a href="http://www.taobao.com/" target="_blank"><p>Taobao</p></a>
</div>
<div id="site">
<a href="http://www.sina.com/" target="_blank"><p>Sina</p></a>
</div>
<div id="site">
<a href="http://www.tiexue.net/" target="_blank"><p>Tiexue</p></a>
</div>
<div id="site">
<a href="http://www.iqiyi.com/" target="_blank"><p>Iqiyi</p></a>
</div>
<div id="site">
<a href="http://www.hunantv.com/" target="_blank"><p>HNTV</p></a>
</div>
<div id="site">
<a href="http://www.gamersky.com/" target="_blank"><p>Gamersky</p></a>
</div>
<div id="site">
<a href="http://www.imooc.com/" target="_blank"><p>Imooc</p></a>
</div>
<div id="site">
<a href="http://www.google.com/" target="_blank"><p>Google</p></a>
</div>
<div id="site">
<a href="http://www.youtube.com/" target="_blank"><p>Youtube</p></a>
</div>
<div id="site">
<a href="http://www.twitter.com/" target="_blank"><p>Twitter</p></a>
</div>
<div id="site">
<a href="http://www.facebook.com/" target="_blank"><p>Facebook</p></a>
</div>
</div>
</div>
<div id="author">
<p id="name">Made By Mr.H<br>QQ:1842452856   Tel:15674800401</p>
</div>
</body>
</html>

查看全部

0 采集收起来源：screen对象
2019-08-25
qq_阿龙_12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航页面</title>
<link href="favicon.ico" rel="shortcut icon"/>
<style type="text/css">
*{margin:0; padding:0; text-decoration:none; border:0;}
body{background-image:url(http://image.tianjimedia.com/uploadImages/2012/273/SYJ43SG47PC8_NatGeo04.jpg); background-size:cover; transition:2s;}
#box{width:70%; height:200px; margin:20px auto; box-shadow:0 0 20px #000 inset; transition:0.2s;}
#box:hover{background-color:#000; opacity: 0.7;}
#box p{line-height:200px; text-align:center; font-size:72px; color:#000;}
#box a:hover p{color:#fff;}
#vice-box{width:70%; margin:20px auto; transition:0.2s;}
#limit{width:100%; overflow:hidden;}
#site{width:24%; height:150px; float:left; margin-left:0.5%; margin-right:0.5%; margin-top:5px; margin-bottom:5px; box-shadow:0 0 20px #000 inset; transition:1s;}
#site:hover{background-color:#000; opacity: 0.7;}
#site p{line-height:150px; text-align:center; font-size:36px; color:#000;}
#site a:hover p{color:#fff;}
#author{width:70%; height:50px; margin:0 auto;}
#name{display:block; width:30%; line-height:50px; margin:0 auto; text-align:center; color:#000; font:15px; transition:2s; cursor:pointer;}
#name:hover{color:#fff;}
#MrH{position:relative; top:5px; width:70%; margin:0 auto; z-index:1;}
#MrH img{position:relative; width:100%; height:0; z-index:1;}
#MrH p{position:absolute; display:inline-block; background-color:#000; opacity:0.8; width:50px; height:25px; line-height:25px; text-align:center; bottom:5px; right:5px; z-index:10; color:#fff; cursor:pointer; transition:1s;}
#MrH p:hover{opacity:1;}
#button{display:inline-block; width:100px; height:50px; position:fixed; right:50px; top:20px; opacity:0.7;color:#fff; cursor:pointer;}
#next{position:relative; float:right; width:50px; text-align:center; line-height:50px; font-size:25px; right:0; background-color:#000;}
#next:hover{opacity:0.9;}
#prev{position:relative; float:left; width:50px; text-align:center; line-height:50px; font-size:25px; left:0; background-color:#000;}
#prev:hover{opacity:0.9;}
</style>
<script type="text/javascript">
var BGI=9;
window.onload=function anonymous(){
var name=document.getElementById("name");
var hiden=document.getElementById("hiden");
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var page=document.getElementById("page");
var box=document.getElementById("box");
var Vbox=document.getElementById("vice-box");
var button=document.getElementById("button");
var name=document.getElementById("name");
var maxImage=19;
var height=0;

name.onclick=function drop(){
if(height<450){
height+=1;
document.getElementById("photo").style.height=height+"px";
}
setTimeout(drop,1);
}

hiden.onclick=function cover(){
if(height>=0){
height-=1;
document.getElementById("photo").style.height=height+"px";
}
setTimeout(cover,1);
}

prev.onclick=function(){
alert("抱歉，此页面暂时无法更换背景图。");
}
next.onclick=function(){
BGI++;
if(BGI>maxImage){
BGI=1;
}
alert("抱歉，此页面暂时无法更换背景图。");
}
function width(){
if(document.body.offsetWidth<971){
box.style.width="970px";
Vbox.style.width="970px";
button.style.right="0px";
name.style.width="290px";
}else{
box.style.width="70%";
Vbox.style.width="70%";
button.style.right="50px";
name.style.width="30%";
}
}
setInterval(width,500);
}
</script>
</head>

<body id="page">
<div id="MrH">
<a href="http://user.qzone.qq.com/1842452856/main" target="_blank" ><img title="点击进入我的空间" id="photo" src="http://image.3001.net/images/new/pic-hk.jpg"></a>
<p id="hiden">hiden</p>
</div>
<div id="button">
<p id="next" title="下一张背景图">></p>
<p id="prev" title="上一张背景图"><</p>
</div>
<div id="box">
<a href="http://www.baidu.com/" target="_new"><p>Baidu</p></a>
</div>
<div id="vice-box">
<div id="limit">
<div id="site">
<a href="http://www.youku.com/" target="_blank"><p>Youku</p></a>
</div>
<div id="site">
<a href="http://www.taobao.com/" target="_blank"><p>Taobao</p></a>
</div>
<div id="site">
<a href="http://www.sina.com/" target="_blank"><p>Sina</p></a>
</div>
<div id="site">
<a href="http://www.tiexue.net/" target="_blank"><p>Tiexue</p></a>
</div>
<div id="site">
<a href="http://www.iqiyi.com/" target="_blank"><p>Iqiyi</p></a>
</div>
<div id="site">
<a href="http://www.hunantv.com/" target="_blank"><p>HNTV</p></a>
</div>
<div id="site">
<a href="http://www.gamersky.com/" target="_blank"><p>Gamersky</p></a>
</div>
<div id="site">
<a href="http://www.imooc.com/" target="_blank"><p>Imooc</p></a>
</div>
<div id="site">
<a href="http://www.google.com/" target="_blank"><p>Google</p></a>
</div>
<div id="site">
<a href="http://www.youtube.com/" target="_blank"><p>Youtube</p></a>
</div>
<div id="site">
<a href="http://www.twitter.com/" target="_blank"><p>Twitter</p></a>
</div>
<div id="site">
<a href="http://www.facebook.com/" target="_blank"><p>Facebook</p></a>
</div>
</div>
</div>
<div id="author">
<p id="name">Made By Mr.H<br>QQ:1842452856   Tel:15674800401</p>
</div>
</body>
</html>

查看全部

0 采集收起来源：screen对象
2019-08-25
qq_阿龙_12

<!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 oUl1=document.getElementById("ul1");
var aLi=oUl1.getElementsByTagName("li");
var oDiv=document.getElementById("tab-list");
var aDiv=oDiv.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 i=0;i<aDiv.length;i++){
aDiv[i].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-08-25
qq_慕设计1278587

这道题有多种方法，选用自己容易理解的再认真完成。

查看全部

0 采集收起来源：编程练习
2019-08-24
qq_慕设计1278587

记住parselnt是将字符串转成整型

查看全部

0 采集收起来源：编程练习
2019-08-24
qq_阿龙_12

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var tr=document.getElementsByTagName("tr");

var length=tr.length;
for(var i=0;i<tr.length;i++){
bgcChange(tr[i])
}

function bgcChange(obj)
{
obj.onmouseover=function(){
obj.style.backgroundColor="red";
}
obj.onmouseout=function(){
obj.style.backgroundColor="#fff";
}
}

}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

function add1(){
var num=document.getElementsByTagName("tr").length;
var table=document.getElementById("table");
var newtr=document.createElement("tr");
var newth1=document.createElement("td");
var newth2=document.createElement("td");
var newth3=document.createElement("td");
newth1.innerHTML="xh00"+num;
newth2.innerHTML="第"+num+"学生";
newth3.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";
newtr.onmouseover=function(){
newtr.style.backgroundColor="red";
}
newtr.onmouseout=function(){
newtr.style.backgroundColor="#fff";
}
table.appendChild(newtr);
newtr.appendChild(newth1);
newtr.appendChild(newth2);
newtr.appendChild(newth3);

}


// 创建删除函数
function del(obj)
{
var tr=obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}

</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>

<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="del(this);" >删除</a></td> 
</tr>

<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="del(this);" >删除</a></td> 
</tr>

</table>
<input type="button" value="添加一行" onclick="add1()" /> 
</body>
</html>

查看全部

0 采集收起来源：编程练习
2019-08-24

Enki

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

<ul id="test">
    <li>JavaScript</li>
    <li>HTML</li>
</ul>

<script type="text/javascript">

    var otest = document.getElementById("test");
    var newnode = document.createElement("li")
    newnode.innerHTML = "PHP";
    otest.appendChild(newnode)


</script>

</body>
</html>

查看全部

0 采集收起来源：插入节点appendChild()

2019-08-24

Enki
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text =con[i].getAttribute("title")
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
</html>
查看全部

0 采集收起来源：getAttribute()方法
2019-08-24

Enki

<!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");
        for (var i = 0; i < hobby.length; i++) {
            if (hobby[i].type == "checkbox") {
                hobby[i].checked = true;
            }
        }
        // 任务1

    }

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

    }

    function checkone() {
        clearall()
        var j = document.getElementById("wb").value;
        var hobby = document.getElementsByName("hobby")
        for(var i= 1 ; i<= hobby.length; i++ ){
            if(i == j ){
                hobby[i-1].checked = true;
            }
        }
        // 任务3

    }

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

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName

2019-08-24

笨鸟

根据substr的截取规则，sourceArr[i].indexOf(":") 表示从：这里开始截取，截取的结果包括这个冒号；
+1 表示从冒号的后一位开始截取，比如 var str=小明:90; 截取结果为 90
如果不+1，截取的结果= :90
parseInt() 是将字符串转为int型的函数，如果字符串里有非数字的符号字母，转换结果会出错

查看全部

0 采集收起来源：编程练习
2019-08-24
antadams

&&——与；
!=——不等于；

查看全部

1 采集收起来源：访问兄弟节点
2019-08-24
antadams

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

查看全部

0 采集收起来源：节点属性
2019-08-23
笨鸟

随机数 random()
我们取得介于 0 到 1 之间的一个随机数

查看全部

0 采集收起来源：随机数 random()
2019-08-23
笨鸟

使用indexOf()方法，检索第二个字符ｏ出现的位置。

查看全部

0 采集收起来源：返回指定的字符串首次出现的位置
2019-08-23

首页上一页 295 296 297 298 299 300 301 下一页尾页

0/150

提交

取消

开始学习

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

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

JavaScript进阶篇

变量声明

给变量取个名字(变量命名)