JS入门到精通第5章 JavaScript对象与数组

分类Javascript时间2026-05-31 15:04:30发布信义之树浏览112

导读：一、练习1. 练习1 （1）源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>日期对象</title> </head> <bo...

一、练习

1. 练习1

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期对象</title>
</head>

<body>
<script type="text/javascript">
var now=new Date();
var year=now.getFullYear();   
var month=now.getMonth()+1;
var date=now.getDate();
var day=now.getDay();    
var week="";    
    
switch(day)    {
    case 1:
        week="星期一";
        break;
    case 2:
        week="星期二";
        break;
    case 3:
        week="星期三";
        break;
    case 4:
        week="星期四";
        break;
    case 5:
        week="星期五";
        break;
    case 6:
        week="星期六";
        break;    
    case 0:
        week="星期日";
        break;    
}

var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
    
document.write("<span style='font-size:24px;'>");
document.write("今天是："+year+"年"+month+"月"+date+"日 "+week);   
document.write("<br>现在是："+hour+":"+minute+":"+second);   
document.write("</span>");   
    
    
</script>        
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_1/

（3）Tips

就是0。

2. 练习2

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
<script type="text/javascript">
var date1=new Date();
var theNextYear=date1.getFullYear()+1;     //获取明年的年份

document.write(theNextYear);  
    
date1.setFullYear(theNextYear);
date1.setMonth(0);
date1.setDate(1);

document.write("<br>"+date1.getMonth());     
    
var date2=new Date();
document.write("<br>"+date1.getTime());    
document.write("<br>"+date2.getTime());     
var date3=date1.getTime()-date2.getTime();
document.write("<br>"+date3);     
var days=Math.ceil(date3/(24*60*60*1000));   

document.write("<br>今天距离明年元旦还有"+days+"天");  
    
    
</script>        
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_2/

（3）Tips

加深印象。

3. 练习3

（1）源代码

index.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>altKey、ctrlKey和shiftKey属性的综合应用</title>
<script type="text/javascript">
function example(e){
    if(e.ctrlKey && e.altKey && e.shiftKey){
        alert('明日科技给您拜年了!');
        window.location.href='index_ok.html';
    }
}
document.onkeydown=example;
</script>    
</head>

<body>
请同时按下Ctrl键、Shift键和Alt键，会有惊喜出现！    
</body>
</html>

index_ok.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>altKey、ctrlKey和shiftKey属性的综合应用</title>
</head>

<body>
<div>
    <img src="images/bg.jpg" width="800" height="600">    
</div>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_3/

（3）Tips

这样算什么方式。

4. 练习4

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
    
<script type="text/javascript">
function gosite(e){
    if(e.button==2){
        alert('明日科技欢迎您');
        window.open("http://www.mingrisoft.com");
        return false;
    }
}
document.onmousedown=gosite;    
    
</script>   
    
</head>

<body>
<table width="694" height="341"  border="0" cellpadding="-2" cellspacing="-2">
  <tr>
    <td valign="top">
      <table width="100%" height="492"  border="0" cellpadding="-2" cellspacing="-2">
        <tr>
          <td height="32" >
              <img src="images/01.gif" width="694" height="168"></td>
        </tr>
        <tr valign="top">
          <td height="322"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="35" height="322" valign="top"><img src="images/02.gif" width="35" height="89"></td>
              <td valign="top">
<table width="100%" height="200"  border="0" cellpadding="-2" cellspacing="-2">
              <tr>
              <td width="170" height="5"></td>
              </tr>
                <tr>
                  <td height="25" colspan="3" valign="middle"><span>博客会员信息列表</span></td>
                  </tr>
                <tr>
                  <td colspan="3" valign="top">
<table width="90%" border="1" datasrc="#f" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#999999">
<thead>
<tr>
<td width="16%">名称</td>
<td width="17%">联系地址</td>
<td width="22%">邮政编码</td>
<td width="22%">联系电话</td>
<td width="23%">OICQ号码</td>
</tr>
</thead>
<tr>
  <td>南方</td>
  <td>南方</td>
  <td>130000</td>
  <td>8487****</td>
  <td>1818***</td>
</tr>
<tr>
<td>有一说二</td>
<td>北方</td>
<td>130021</td>
<td>5456****</td>
<td>168168*</td>
</tr>
</table>
                  </td>
                </tr>
                <tr>
                <td height="5"></td>
                </tr>
              </table>              
              </td>
              <td width="44" valign="top"><img src="images/04.gif" width="44" height="89"></td>
            </tr>
          </table></td>
        </tr>
      </table>
    </td>
  </tr>
</table>  
    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_4/

（3）Tips

网址怎么打不开了。

5. 练习5

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>位置对象</title>
<style>
#test {
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  width: 300px;
  position: relative;
  border: 5px solid black
}
</style>
</head>
<body>

<div id="test">
  <p>点击按钮获取 div 元素的位置:</p>
  <p><button onclick="myFunction()">点我</button></p>
  <p id="demo">offsetLeft: <br>offsetTop: </p>
</div>

<script>
function myFunction() {
  var testDiv = document.getElementById("test");
  var demoDiv = document.getElementById("demo");
  demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
}
</script>

</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_5/

（3）Tips

offsetleft。

6. 练习6

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>x和y属性在动态移动层中的运用</title>
<style type="text/css">
  #test {
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  width: 300px;
  position: relative;
  border: 5px solid black
}  
    
  
    
</style>
</head>
<body style="background-color: #ADBAB1">    

    
  <div id="test">
  <p>按下去时的位置:</p>
  
  <p id="demo">offsetLeft: <br>offsetTop: </p>
</div>  
    
    
 <div id="div1" style="visibility:visible ; background-color:#FFFF00; position: absolute; top: 60px; left: 200px; width: 360px; height: 200px;">    
     <div id="title" onmousedown="div_down('div1',event)" style="background-color:#30608F;padding:2px; font-size:13px;text-indent:5px;color:#FFFFFF;cursor:move">吉林省明日科技有限公司
     </div>
    
     <img id="close" onclick="hide('div1')" style="position: absolute; right: 2px; top: 2px" src="close.gif" width="15" height="15">
    
     <span style="font-size: 13px;"><br>
    &emsp;&emsp;吉林省明日科技有限公司是一家以计算机软件技术为核心的高科技型企业，公司创建于1999年12月，是专业的应用软件开发商和服务提供商。多年来始终致力于行业管理软件开发、数字化出版物开发制作、行业电子商务网站开发等，先后成功开发了涉及生产、管理、物流、营销、服务等领域的多种企业管理应用软件和应用平台，目前已成为计算机出版行业的知名品牌。
    </span>
    
    
    
 </div>   
    
    
    
<script type="text/javascript">   
var Obj="none";
var pX;
var pY;    
 
var demoDiv = document.getElementById("demo");     
    
document.onmousemove=div_move;
document.onmouseup=div_up;

    
    
function div_down(tag,e){
    Obj=tag;
    pX=e.x-parseInt(document.getElementById(Obj).style.left); //这里是求出距离！
    pY=e.y-parseInt(document.getElementById(Obj).style.top);  
    
    demoDiv.innerHTML = "offsetLeft: " + pX + "<br>offsetTop: " + pY;
}        
    
function div_move(e){
    if(Obj!="none"){
        document.getElementById(Obj).style.left=e.x-pX+"px";
        document.getElementById(Obj).style.top=e.y-pY+"px";
        e.returnValue=false;
    }    
}  
    
function div_up(){Obj="none";}  
    
function hide(divid){
    document.getElementById(divid).style.visibility="hidden";
}    
    
 
    
</script>    
    </body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_6/

（3）Tips

不带要再研究。

7. 练习7

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>选中表格中的单元格</title>
</head>
<style type="text/css">
.STYLE3 {font-size: 13px; color: #FF0000; }
.STYLE4 {font-size: 12px}
</style>    
    
 <body>   
    
 <table width="547" height="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="34"><img src="images/bg.jpg" width="547" height="34"></td>
  </tr>
  <tr>
    <td valign="top" background="images/bg2.jpg">
<table id="table1" width="500" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#CCCCCC">
      <tr>
        <td width="113" height="24" bgcolor="#FFFFFF"><span>商品名称</span></td>
        <td width="83" bgcolor="#FFFFFF"><span>数量</span></td>
        <td width="139" bgcolor="#FFFFFF"><span>价格</span></td>
        <td width="142" bgcolor="#FFFFFF"><span>合计</span></td>
      </tr>
      <tr>
        <td height="20" bgcolor="#FFFFFF">手机</td>
        <td bgcolor="#FFFFFF">1</td>
        <td bgcolor="#FFFFFF">888</td>
        <td bgcolor="#FFFFFF">888</td>
      </tr>
      <tr>
        <td height="20" bgcolor="#FFFFFF">手表</td>
        <td bgcolor="#FFFFFF">1</td>
        <td bgcolor="#FFFFFF">999</td>
        <td bgcolor="#FFFFFF">999</td>
      </tr>
      <tr>
        <td height="20" bgcolor="#FFFFFF">数码相机</td>
        <td bgcolor="#FFFFFF">2</td>
        <td bgcolor="#FFFFFF">2400</td>
        <td bgcolor="#FFFFFF">4800</td>
      </tr>
      <tr>
        <td height="20" bgcolor="#FFFFFF">手机</td>
        <td bgcolor="#FFFFFF">4</td>
        <td bgcolor="#FFFFFF">2400</td>
        <td bgcolor="#FFFFFF">9600</td>
      </tr>
      <tr>
        <td height="20" bgcolor="#FFFFFF">移动硬盘</td>
        <td bgcolor="#FFFFFF">4</td>
        <td bgcolor="#FFFFFF">400</td>
        <td bgcolor="#FFFFFF">1600</td>
      </tr>
      <tr>
        <td height="20" bgcolor="#FFFFFF"><span>笔记本电脑</span></td>
        <td bgcolor="#FFFFFF"><span>2</span></td>
        <td bgcolor="#FFFFFF"><span>4150</span></td>
        <td bgcolor="#FFFFFF"><span>9200</span></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="27"><img src="images/bg1.jpg" width="547" height="27"></td>
  </tr>
</table>   
    
<script type="text/javascript">
 var lastSelection = null;
 
table1.onclick=select;
    
function select(event){
    var e, c;
    e = event.target;        //获取触发事件的元素
    if(e.tagName == "TD"){
        if (lastSelection!=null){
          window.lastSelection.style.backgroundColor="";
          window.lastSelection.style.color="";
        }
 
      e.style.backgroundColor="darkblue";
      e.style.color="white";
      lastSelection=e; 
    }
    
} 


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

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_7/

（3）Tips

这样就可以了呀，其他都什么玩意。

8. 练习8

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出数组元素</title>
</head>
<body>
<script type="text/javascript">    

var students=new Array(3);
students[0]="张三";
students[1]="李四";    
students[2]="王五";    
    
for(var i=0;i<3;i++){
    document.write("第"+(i+1)+"个学霸姓名是："+students[i]+"<br>");
}    
    

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

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_8/

（3）Tips

没什么可说的，最基本。

9. 练习9

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出省份、省会和旅游景点</title>
</head>
<body>
    
<table cellspacing="1" bgcolor="#CC00FF">
  <tr height="30" bgcolor="#FFFFFF">
    <td width="50">序号</td>
    <td width="100">省份</td>
    <td width="100">省会</td>
    <td width="260">旅游景点</td>
  </tr>    
    
    
<script type="text/javascript">    
var province=new Array("黑龙江省","吉林省","辽宁省");
var city=new Array("哈尔滨市","长春市","沈阳市");
var tourist=new Array("太阳岛 圣索菲亚教堂 中央大街","净月潭 长影世纪城 动植物公园","沈阳故宫 沈阳北陵 张氏帅府");
    
for(var i=0;i<province.length;i++){
    document.write("<tr height=26 bgcolor='#FFFFFF'>");
    document.write("<td>"+(i+1)+"</td>");
    document.write("<td>"+province[i]+"</td>");
    document.write("<td>"+city[i]+"</td>");
    document.write("<td>"+tourist[i]+"</td>");
    document.write("</tr>");    
}    
    

</script>        
    

</table>    

</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_9/

（3）Tips

一一对应，很简单。

10. 练习10

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用自定义方法显示数组中的全部数据</title>
</head>
<body>
<h3>输出数组中所有元素</h3>
<script type="text/javascript">    
Array.prototype.outAll=function(ar){
    for(var i=0;i<this.length;i++){
    document.write(this[i]);
    document.write(ar);
    }
}
    
var arr=new Array(1,2,3,4,5,6,7,8);
arr.outAll(" ");
    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_10/

（3）Tips

自定义方法，多会教的，在哪，莫名其妙。

11. 练习11

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出2016电影票房排行榜前五名</title>
<style type="text/css">
    .left{padding-left:10px;}
    
</style>
</head>
<body>
<script type="text/javascript">        
var movieArr=new Array("魔兽","美人鱼","西游记之孙悟空三打白骨精","疯狂动物城","美国队长3");    
var boxofficeArr=new Array(14.7,33.9,12,15.3,12.5);
var sortArr=new Array(14.7,33.9,12,15.3,12.5);
function ascOrder(x,y){
    return y-x;
}    
    
sortArr.sort(ascOrder);   //为票房进行降序排序

Array.prototype.outAll=function(ar){
    for(var i=0;i<this.length;i++){
    document.write(this[i]);
    document.write(ar);
    }
}
    
document.write("<br>倒序后：");
sortArr.outAll("  ");    
document.write("<br>原来的：");    
boxofficeArr.outAll("  ");    
document.write("<br>");
document.write("<br>");        
</script>    
<table cellspacing="1" bgcolor="#CC00FF">    
<tr height="30" bgcolor="#FFFFFF">
   <td width="50">排名</td>
   <td width="210">影片</td>
   <td width="100">票房</td>
  </tr>    
        
<script type="text/javascript">    
    
for(var i=0;i<sortArr.length;i++){
    
    for(var j=0;j<boxofficeArr.length;j++){    
        
      if(sortArr[i]==boxofficeArr[j]){
        document.write("<tr height=26 bgcolor='#FFFFFF'>");
        document.write("<td>"+(i+1)+"</td>");
        document.write("<td>"+movieArr[j]+"</td>");  
        document.write("<td>"+sortArr[i]+"亿元</td>");  
        document.write("</tr>"); 
      }
        
    }
}    
    

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

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_11/

（3）Tips

我一点点推算出来的，他讲的一点不清晰。

12. 练习12

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算歌手的最终得分</title>
</head>
<body>
<script type="text/javascript">    
    
var scoreArr=new Array(95,90,89,91,96);
var scoreStr="";

for(var i=0;i<scoreArr.length;i++){
    scoreStr+=scoreArr[i]+"分 ";
}

document.write("5位评委打分："+scoreStr);//输出5位评委的打分    
    
    
function ascOrder(x,y){
    return y-x;
}    
    
scoreArr.sort(ascOrder); 
    
Array.prototype.outAll=function(ar){
    for(var i=0;i<this.length;i++){
    document.write(this[i]);
    document.write(ar);
    }
}
    
document.write("<br>倒序后：");
scoreArr.outAll("分 ");       
document.write("<br>");    
    
var newArr=scoreArr.slice(1,scoreArr.length-1);
document.write("去掉最高分和最低分：");
newArr.outAll("分 "); 
    
var totalScore=0;
for(var i=0;i<newArr.length;i++){
    totalScore+=newArr[i];
}
    
document.write("<br>去掉一个最高分："+scoreArr[0]+"分");    
document.write("<br>去掉一个最低分："+scoreArr[scoreArr.length-1]+"分");    
document.write("<br>歌手最终得分："+totalScore/newArr.length+"分");    
    
    

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

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_12/

（3）Tips

这样才能看出来怎么回事。

二、编程训练

1. 训练1

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时间对象的应用</title>
</head>
<body>
<script type="text/javascript">    
    
function interval(begindate,enddate){
    var begin = new Date(begindate);
    var end=new Date(enddate);
    var resultdate=end.getTime()-begin.getTime();
    var hour=Math.round(resultdate/(1000*60*60));
    
    document.write("<span style='font-size:24px;'>");
    document.write("开始日期："+begindate);
    document.write("<br>结束日期："+enddate);
    document.write("<br>两个日期之间的间隔小时数为"+hour);
    document.write("</span><br>");    
}    
    
    
interval("2026/05/01","2026/06/01");
    
    
interval("2026/06/01","2026/07/01");    

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

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_13/

（3）Tips

简单。

2. 训练2

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
</head>
<body>
<script type="text/javascript">    
    
function countdown(title,Intime){
    var online=new Date(Intime);
    var now=new Date();
    var leave=online.getTime()-now.getTime();
    var day=Math.floor(leave/(1000 * 60 * 60 * 24))+1;
    
    document.write("高考时间："+online.getTime());
    document.write("<br>现在时间："+now.getTime());
    document.write("<br>间隔："+leave);
    document.write("<br>单纯是多少："+(leave/(1000 * 60 * 60 * 24)));
    document.write("<br>向下取整后："+Math.floor(leave/(1000 * 60 * 60 * 24)));
    document.write("<br>间隔天数："+day+"<br>");
    
    
    
    if(day>1){
        document.write("距"+ title+"还有"+day+"天！");    
    }else if (day == 1){
            document.write("明天就是"+title+"啦，希望你能考个好成绩！");
    }else if (day == 0){
            document.write("今天就是"+title+"，不要太担心，只要发挥出自己的正常水平就可以，加油^x^");
    }else{
            document.write(title+"已经过了，你考的怎么样呢！");
    }    
}    
    
countdown("2026年高考","2026/6/10");    
    
    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_14/

（3）Tips

为何总是百转千回后才能懂。

3. 训练3

（1）源代码

<!DOCTYPE >
<html>
<head>
<meta charset="utf-8">
<title>鼠标对象应用</title>
    
    
<script type="text/javascript">    
    
function whichButton(event){
    var btnNum=event.button;
    
    if(btnNum==0){
        alert("您点击了鼠标左键！");
    }else if(btnNum==1){
        alert("您点击了鼠标中键！");
    }else if(btnNum==2){
        alert("您点击了鼠标右键！");
    }else{
        alert("不确定");
    }
}    
    
    

 
</script>    
    
    
    
    
</head>    


<body onmousedown="whichButton(event)">
    
</body>
        

    
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_15/

（3）Tips

各种稀奇古怪的问题。为啥火狐里不弹出。

4. 训练4

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期对象的优化</title>
</head>
<body>
<script type="text/javascript">    
    
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var day=now.getDay();
var week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

alert("今天是："+year+"年"+month+"月"+date+"日 "+week[day]);
    
    
    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_16/

（3）Tips

其实挺简单。

5. 训练5

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组匿名函数</title>
</head>
<body>
<script type="text/javascript">    
var arr=new Array(1,3,6,2,9,5);    
var maxValue = arr[0];
    
Array.prototype.outMax=function(){
    for(var i=1;i<this.length;i++){
        if(maxValue<this[i]){
            maxValue=this[i];
        }
        
    }
    return maxValue;
}
    
document.write("数组中的元素："+arr);    
document.write("<br>数组中元素的最大值："+arr.outMax());    
    
    
    
    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_17/

（3）Tips

加深技能。

6. 训练6

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slice应用</title>
</head>
<body>
<script type="text/javascript">    
var arr=new Array(1,2,3,4,5,6);
    
document.write("原数组："+arr+"<br>");    
document.write("随意取："+arr.slice(3,-1));    
    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_18/

（3）Tips

懂了吧。

三、实践与练习

1. 实践1

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时间对象的取余应用</title>
</head>
<body>
<script type="text/javascript">    
function cal(biryear,birmonth,birday){
    var result="<br><br>周星星从出生到现在已度过了<br>";
    var now=new Date;
    var bir=new Date(biryear,birmonth-1,birday);
    var cha=now-bir;
    
    var day = cha / 86400000;
    document.write("<br><br>day:"+day);
    var days = parseInt(day);
    document.write("<br>转换成整数数值days："+days);
    
    var hour = cha % 86400000;
    document.write("<br><br>取余的hour:"+hour);
    var hour = (cha % 86400000) / 3600000;
    document.write("<br>转换成小时hour:"+hour);
    var hours = parseInt(hour);
    document.write("<br>转换成整数数值hours："+hours);
    
    var minute = cha % 86400000 % 3600000;
    document.write("<br><br>取余的minute:"+minute);
    var minute = (cha % 86400000 % 3600000) / 60000;
    document.write("<br>minute:"+minute);
    var minutes = parseInt(minute);
    document.write("<br>转换成整数数值minutes："+minutes);
    
    var second = (cha % 86400000 % 3600000 % 60000)/ 1000;
    document.write("<br><br>second:"+second);
    var seconds = parseInt(second);
    document.write("<br>转换成整数数值seconds："+seconds);
    
    result += days + "天 >>>" + hours + "小时 >>>" + minutes + "分 >>>" + seconds + "秒";
    return result;
}
    
document.write(cal(2000,6,9));    
    
    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_19/

（3）Tips

怎么这么别扭。

2. 实践2

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>又是数组</title>
    
    
<style>
span{margin-right: 10px;}
</style>    
    
</head>
<body>
<script type="text/javascript">    
var stations = ['长春','昌图西','铁岭西','沈阳北','绥中北','北京'];
    
document.write("<div><span>途经站：</span>");    
    
for(var i=0;i<stations.length;i++){
    document.write("<span>"+stations[i]+"</span>");    
}    
    
document.write("</div>");    
    
    
stations.reverse();    
document.write("<div><span>反向站：</span>");
    
for(var i=0;i<stations.length;i++){
    document.write("<span>"+stations[i]+"</span>");    
}        
    
document.write("</div>");    
    
</script>    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_20/

（3）Tips

reverse。

3. 实践3

（1）源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组输出表格</title>
    
<style>
    
body{font-family:微软雅黑;font-size:14px}
.title{background: #B6DF48;font-size:18px;}    
.content:nth-child(odd){background: #E8F3D1;}    
.title,.content{width:430px;height:36px;line-height:36px;border: 1px solid #dddddd;}
.title,.content:not(:last-child){border-bottom:none;}
.title .col-1,.content .col-1{width:130px;}    
.title .col-2,.content .col-2{width:160px;}    
.content{clear:both}
    
.title div,.content div{text-align:center;float:left}
    
</style>    
    
    
    
</head>
<body>
<script type="text/javascript">    
var phones=[
    { brand : 'iPhone',sales : 5270 },
    { brand : 'Meizu',sales : 948 },
    { brand : 'HUAWEI',sales : 6490 },
    { brand : 'MI',sales : 4796 },
    { brand : 'Gionee',sales : 478 },
    { brand : 'vivo',sales : 7464 },
    { brand : 'Samsung',sales : 595 },
    { brand : 'OPPO',sales : 7637 },
    { brand : 'HONOR',sales : 5427 },    
];    

phones.sort(function(a,b){
  var x=a.sales;
  var y=b.sales;
  return x<y ? 1:-1; //这样比较好理解
});
    
    
Array.prototype.outAll=function(ar){
    for(var i=0;i<this.length;i++){
    document.write(this[i].sales);
    document.write(ar);
    }
}
    
phones.outAll("<br>");    
</script>
    
    
<div>
    <div>排名</div>
    <div>品牌</div>
    <div>总销量（万部）</div>
</div>    
    
    

    
<script type="text/javascript">    
    
for(var i=0;i<phones.length;i++){
  document.write("<div>");    
  document.write("<div>"+(i+1)+"</div>");
  document.write("<div>"+phones[i].brand+"</div>");
  document.write("<div>"+phones[i].sales+"</div>");    
    
    
  document.write("</div>");
}    
    
</script>    
    
    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/5_21/

（3）Tips

字典用.来输出。

JS入门到精通第4章函数 JS入门到精通第6章字符串与数值数组

JS入门到精通 第5章 JavaScript对象与数组

相关内容

JS入门到精通第5章 JavaScript对象与数组