浏览器不兼容问题
空闲写了一段JavaScript代码
该代码功能：
1.打开网页自动播放背景音乐，音乐不停循环播放
2.客户端在文本框，文本域中输入内容，提交后页面会自动以表格方式显示输入的信息
3.客户端可以通过点击相应按钮，提交输入的信息，查看总信息数，删除显示在表格中信息
代码完成后，我用火狐测试，情况是
1.该页面功能全部实现，
2.但播放不出背景音乐；
纠结半天，怀疑是否是机器播放器问题，于是我让朋友从局域进我的页面
使用的是IE浏览器
结果：
1.有背景音乐功能
2.但其他操作都无法实现
我一直以为是代码的问题，后来我突然想到，那肯定是浏览器兼容的问题了，那情何以堪啊
原始代码：
View Code
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>说说</title>
5
6 <script language="javascript">
7
8 /*
9 在说说列表中添加一条评论信息：首先将信息添加到说说列表后面
10 然后清空评论人和评论内容文本框。
11 */
12 function addElement(){
13
14 //获得用户名
15 var ThePerson=form1.person.value;
16 //获得说说内容
17 var TheContent=form1.content.value;
18
19 /*验证发表人和内容不能为空*/
20 if(ThePerson!=''&&TheContent!=''){
21
22 //创建输入框form1中的person与content与time的TextNode节点
23 var person=document.createTextNode(form1.person.value);
24 var content=document.createTextNode(form1.content.value);
25
26
27
28 //获取发表日期，并创建time节点
29 var now=new Date();
30 var year=now.getFullYear();
31 var month=now.getMonth()+1;
32 var date=now.getDate();
33 var hour=now.getHours();
34 var minu=now.getMinutes();
35 var seconds=now.getSeconds();
36 var Ntime=year+"-"+month+"-"+date+" "+hour+":"+minu+":"+seconds;
37 var time=document.createTextNode(Ntime);
38
39
40
41
42
43 //创建存入表单中的td,tr,body的Element节点
44 var td_person=document.createElement("td");
45 var td_content=document.createElement("td");
46 var td_time=document.createElement("td");
47 var tr=document.createElement("tr");
48
49 //将TextNode类型节点添加td类型节点中
50 td_person.appendChild(person);
51 td_content.appendChild(content);
52 td_time.appendChild(time);
53
54 //将td类型节点添加到tr类型节点中
55 tr.appendChild(td_person);
56 tr.appendChild(td_content);
57 tr.appendChild(td_time);
58
59 //获得table对象
60 var table1=document.getElementById("table1");
61
62 //将tr类型节点添加到table类型中
63 table1.appendChild(tr);
64
65 //清空评论人文本框
66 form1.person.value="";
67 //清空评论内容文本框
68 form1.content.value="";
69 }
70 else{
71 alert("用户名和内容不能为空");
72 }
73
74 }
75
76
77 /*删除说说第一行信息*/
78 function deleteFirstE(){
79 var table1=document.getElementById("table1");
80 if(table1.rows.length>1){
81 table1.deleteRow(1); //注意：deleteRow()括号中数字i为下标，从0开始
82 }
83 }
84
85 /*删除说说最后一行信息*/
86 function deleteLastE(){
87 var table1=document.getElementById("table1");
88 if(table1.rows.length>1){
89 table1.deleteRow(table1.rows.length-1);
90 }
91 }
92
93 function deleteAllE(){
94 var i;
95 var table1=document.getElementById("table1");
96 while(table1.rows.length>1){
97 table1.deleteRow(1);
98 }
99 }
100
101 /*说说总条数*/
102 function CountE(){
103 var table1=document.getElementById("table1");
104 alert(table1.rows.length-1)
105
106 }
107
108 </script>
109 </head>
110
111 <body topmargin="50">
112
113 <bgsound src="F://JavaWeb//刘德华 - 十七岁.mp3" loop="-1">
114 <table align="center" border="1" id="table1" width="60%" cellpadding="0" cellspacing="0">
115 <caption><h2>说说</h2></caption>
116 <tr>
117 <td width="15%" align="center" bgcolor="#CCCCCC" height="27">标题</td>
118 <td width="65%" align="center" bgcolor="#CCCCCC">说说</td>
119 <td width="20%" align="center" bgcolor="#CCCCCC">发表时间</td>
120 </tr>
121 </table>
122 <br><br>
123 <form name="form1" method="post" action="">
124 <table align="center" width="60%">
125 <tr>
126 <td>
127 <div>标题</div>
128 <input type="text" name="person" id="person">
129 <br>
130
131 <div>说说</div>
132 <textarea cols="40" rows="5" id="content" name="content">
133 </textarea>
134 <br><br>
135 <input type="button" name="button" value="发表" onClick="addElement()">
136 <input type="button" name="Count" value="说说数量" onClick="CountE()">
137 <input type="button" name="deletefirst" value="删除第一行说说" onClick="deleteFirstE()">
138 <input type="button" name="deleteLast" value="删除最后一行说说" onClick="deleteLastE()">
139 <input type="button" name="deleteAll" value="删除全部说说" onClick="deleteAllE()">
140
141 </td>
142 </tr>
143 </table>
144 </form>
145 </body>
146 </html>
看来若想使代码不受浏览器的限制，写代码的过程中就必须要考虑这一问题了
今天终于发现代码问题了，由于该代码不完全符合标准，故只能在部分浏览器上跑
所以说写代码，还是老老实实按着协议标准来，不然会出乱子的。
