慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

qq_银色水晶瓶_0
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    function req(){
          var div = document.getElementById("div1");
          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
     }
</script>
</head>
<body >
    <div >
        <div >
            <div id="div1" >
                <div >请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
            </div>
            <input type="button" value="点击我!" onclick="req()" />
        </div>

    </div>
    <div >
        <ul >结果：
            <li>offsetTop : <span id="li1"></span></li>
            <li>offsetLeft : <span id="li2"></span></li>
            <li> scrollTop : <span id="li3"></span></li>
            <li>scrollLeft : <span id="li4"></span></li>
        </ul>

    </div>
    <div ></div>
</body>
</html>
查看全部

0 采集收起来源：网页卷去的距离与偏移量
2018-06-11
慕码人4351461
二维数组
一维数组，我们看成一组盒子，每个盒子只能放一个内容。
```
一维数组的表示: myarray[ ]
```
二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。
```
二维数组的表示: myarray[ ][ ]
```
注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。
1. 二维数组的定义方法一
```
var myarr=new Array();  //先声明一维  for(var i=0;i<2;i++){   //一维长度为2    myarr[i]=new Array();  //再声明二维     for(var j=0;j<3;j++){   //二维长度为3    myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j    }  }
```
注意: 关于for 循环语句，请看第四章4-5 。
将上面二维数组，用表格的方式表示:
2. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
说明: myarr[0][1] ,0 表示表的行，1表示表的列。
查看全部

0 采集收起来源：二维数组
2018-06-11
saber酱啊

var numa=9;
var numb=7;
if(numa>=10){
numa++;
}
else{
numb--;
}

查看全部

0 采集收起来源：自加一，自减一 ( ++和- -)
2018-06-11
慕码人4351461
了解成员数量(数组属性length)
如果我们想知道数组的大小，只需引用数组的一个属性length。Length属性表示数组的长度，即数组中元素的个数。
语法：
```
myarray.length; //获得数组myarray的长度
```
注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。
```
var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr  document.write(arr.length); //显示数组长度8 document.write(arr[7]); //显示第8个元素的值54
```
同时，JavaScript数组的length属性是可变的，这一点需要特别注意。
```
arr.length=10; //增大数组的长度 document.write(arr.length); //数组长度已经变为10
```
数组随元素的增加，长度也会改变，如下:
```
var arr=[98,76,54,56,76]; // 包含5个数值的数组 document.write(arr.length); //显示数组的长度5 arr[15]=34;  //增加元素，使用索引为15,赋值为34 alert(arr.length); //显示数组的长度16
```
查看全部

0 采集收起来源：了解成员数量(数组属性length)
2018-06-11
慕码人4351461
1.在右边编辑器中第7行创建数组，长度为3，保存在myarr变量中。
2.在右边编辑器中第8、9、10行为数组中每项赋值，分别为88，90，68。
第一种方法：
```
第7行创建数组：var myarr=new Array(3);
第8行myarr[0]=88;
第9行myarr[1]=90;
第10行myarr[2]=68;
```
第二种方法：
var myarr=new Array(88，90，68);
第三种方法：
var myarr=[88，90，68];
查看全部

0 采集收起来源：谁是团里成员（数组赋值）
2018-06-11
慕码人4351461

数组的两个声明形式：
第一种
var myarray=new
Array(1,2,2,3,5);
第二种：
var myarray=[1,2,1,3,5,4,4];

查看全部

0 采集收起来源：谁是团里成员（数组赋值）
2018-06-11
微笑晴天TT

打开新窗口：window.open("http://www.baidu.com","width=600 height=400 ");

查看全部

0 采集收起来源：window对象
2018-06-11
随风cool_xu

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>

<script type="text/javascript">
document.write(Date()+"<br>");
//通过javascript的日期对象来得到当前的日期，并输出。
var time=new Date();
var week=time.getDay();//周
var year= time.getFullYear();//年
var month=time.getMonth();//月
var day=time.getDate();//日
//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var detailArry=scoreStr.split(";");
var all=0;
for(var i=0;i<detailArry.length;i++)
{
all=all+parseInt(detailArry[i].split(":")[1]);
}
var avg=Math.round(all/detailArry.length);
//从数组中将成绩撮出来，然后求和取整，并输出。
document.write(year+"年"+month+"月"+day+"日" +"星期"+week+"<br>"+"总分"+all+"<br>"+"平均分"+avg+"<br>");

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

查看全部

0 采集收起来源：编程练习
2018-06-11
saber酱啊

var mysun= 1;
var mysun1=100
alert((mysun+mysun1)*mysun1/2);

查看全部

0 采集收起来源：给变量取个名字(变量命名)
2018-06-11
saber酱啊

<!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 采集收起来源：什么是变量
2018-06-11
saber酱啊

//在页面中显示文字
document.write("圣杯战争又开始了，我们走Master"+"<br/>");

//页面中弹出提示框
function aa(){
    var saber= document.getElementById("con")
    var aat=confirm("master，准备好了吗")
    if(aat===true){
        saber.innerHTML="Master,我好高兴~"
    }
    else{
        alert("期待你下次使用令咒，master")
        saber.innerHTML="Saber，阿尔托利亚参上~"
    }
}

查看全部

4 采集收起来源：编程练习
2018-06-11
saber酱啊

function aat(){
       var aa=confirm("听从召唤而来,我问你，你就是我的master吗")
       if(aa==true){
           alert("Saber阿尔托利亚·潘德拉贡参上！")
       }
       else{
           alert("Excalibur！！")
       }
   }

查看全部

4 采集收起来源：让你认识JS
2018-06-11
qq_嵩嵩嵩嵩_0

<!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,'大四'],
['小C','男',24,'大四'],
['小D','女',21,'大一'],
['小E','女',22,'大四'],
['小F','男',21,'大一'],
['小G','女',22,'大二'],
['小H','女',20,'大三'],
['小I','女',20,'大一'],
['小J','男',20,'大三']
];
for(var i = 0; i < infos.length; i++) {
if(infos[i][3] === "大一" && infos[i][1] === "女") {
document.write(infos[i][0] + "<br />");
}
}
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2018-06-11
qq_嵩嵩嵩嵩_0

break 直接跳出循环，所有的代码都不再执行
continue 只不执行本次循环

查看全部

0 采集收起来源：继续循环continue
2018-06-11
慕仔516372

替换节点，相应的属性事件也被替换

查看全部

0 采集收起来源：替换元素节点replaceChild()
2018-06-11

首页上一页 735 736 737 738 739 740 741 下一页尾页

0/150

提交

取消

开始学习

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

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

JavaScript进阶篇

二维数组

了解成员数量(数组属性length)