JS入门到精通 第5章 JavaScript对象与数组
导读：一、练习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>
  吉林省明日科技有限公司是一家以计算机软件技术为核心的高科技型企业，公司创建于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
这样就可以了呀，其他都什么玩意。