innerHTML属性：
这个属性不是dom的组成部分，但大多数浏览器都支持的属性
获取文本内容，向你的标签设置内容
<span id="spanid">你好</span>
<div id="div11">
</div>
<script type="text/javascript">
//获取span标签
var span1=document.getElementById("spanid");
//alert(span1.innerHTML);
//获取到div
var div11=document.getElementById("div11");
//div11.innerHTML="aaaa";
//想div里面添加一个表格
var tab="<table border='1'><tr><td>1111</td><td>2222</td></tr><tr><td>1111</td><td>2222</td></tr></table>";
div11.innerHTML=tab";
</script>
</body>案例二：动态显示时间
var date=new Date();
var d1=date.toLocalString();
需要让页面每一秒获取时间
setInterval(),每一秒像div里面写一次时间
<body>
<div id="time">
</div>
<script type="text/javascript">
function getD1(){
var date=new Date();
var d1=date.toLocaleString();
var time1=document.getElementById("time");
time1.innerHTML=d1;
}
setInterval("getD1()",1000);
</script>
</body>创建一个页面，复选框和按钮，四个复选框表示爱好，还有一个复选框操作有一个事件全选和全不选，三个按钮全选和全不选和反选
按钮上分别有事件，使用多选框上的一个属性checked判断是否选中
<body>
<input type="checkbox" id="boxid" οnclick="selAllNo()"/>全选/全不选
<br/>
<input type="checkbox" name="love"/>篮球
<input type="checkbox" name="love"/>排球
<input type="checkbox" name="love"/>网球
<input type="checkbox" name="love"/>足球
<br/>
<input type="button" value="全选" οnclick="selAll()"/>
<input type="button" value="全不选" οnclick="selNo()"/>
<input type="button" value="反选" οnclick="selOther()"/>
<script type="text/javascript">
function selAll(){
//获取要操作的复选框
//返回的是数组，属性checked判断复选框是否选中checked=true表示选中
//遍历数组得到每一个checkbox属性checked设置成TRUE
var loves=document.getElementsByName("love");//得到数组
for(var i=0;i<loves.length;i++){
var love1=loves[i];
love1.checked=true;
}
}
function selNo(){
var loves1=document.getElementsByName("love");
for(var j=0;j<loves1.length;j++){
var love1=loves1[j];
love1.checked=false;
}
}
function selOther(){
//获取到要操作的复选框，返回数组遍历数组，得到每一个复选框,判断当前复选框是否选中，如果选中则属性设置为false否则设置成true
var loves11=document.getElementsByName("love");
for(var a=0;a<loves11.length;a++){
var love11=loves11[a];
//判断当前复选框状态
if(love11.checked==true){
love11.checked=false;
}else{
love11.checked=true;
}
}
function selAllNo(){
var tag1=document.getElementById("boxid");
if(tag1.checked==true){
//调用全选方法
selAll();
}else{
selNo();
}
}
}
</script>
</body>
</html>下拉选择框：创建一个页面设置mutiple属性，四个按钮以及按钮事件
<body>
<div id="s1" >
<div>
<select id="select1" multiple="multiple" style="width:100px;height="100px">
<option>111</option>
<option>222</option>
<option>333</option>
</select>
</div>
<div>
<input type="button" value="选择添加到右边" οnclick="seltoRight"><br/>
<input type="button" value="全部添加到右边" οnclick="alltoRight">
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple" style="width:100px;height="100px">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边" οnclick="seltoLeft"><br/>
<input type="button" value="全部添加到左边" οnclick="alltoLeft">
</div>
</div>
<script type="text/javascript">
function seltoRight(){
//获取select1 里面的option，通过方法getElementsByName,判断是否被选中用selected属性
//得到select2添加选中的部分appenchild
var select1=document.getElementById("select1");
var select2=document.getElementById("select2");
//得到option
var options1=select1.getElementsByName("option");
for(var i=0;i<options1.length;i++){
var option1=options1[i];
if(option1.selected==true){
select2.appendChild(option1);
i--;
}
}
function alltoRight(){
var s1=document.getElementById("select1");
var s2=document.getElementById("select2");
var ops=s1.document.getElementsByName("option");
for(var j=0;j<ops.length;j++){
var op1=ops[j];
s2.appendChild(op1);
j--;
}
}
}
</script>
</body>案例五：省市联动
创建一个页面只有两个下拉选择框，在第一个下拉框下面有个改变事件
<body>
<select id="countryid" οnchange="add1(this.value)">
<option value="0">请选择</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
<option value="德国">德国</option>
</select>
<select id="cityid">
</select>
</body>
<script type="text/javascript">
//创建一个数组来存储数据
var arr=new Array[4];
arr[0]=["中国","南京","新乡","抚州","哈密"];
arr[1]=["英国","华盛顿","休斯顿","纽约"];
arr[2]=["德国","慕尼黑","柏林","法兰克福","狼堡"];
arr[3]=["日本","北海道","东京","大阪","神户","长崎"];
function add1(val){
//alert(val);
//遍历二维数组得到的也是一个数组，拿到数组中的第一个值和传递过啦的值作比较，若相同，获取到第一个值后面的元素，
//得到city的select，添加过去appendchild方法，创建option标签（三步)
//由于每次都要向city里添加option，每次添加之前判断city里面是否有option，如果有则删除在添加
var city1=document.getElementById("cityid");
//得到city里面的option
var options1=city1.getElementsByTagName("option");
for(var m=0;m<options1.length;m++){
//得到每一个option
var op=options1[m];
//删除option,通过父节点删除
city1.removeChild(op);
m--;
}
for(var i=0;i<arr.length;i++){
//得到二维数组里面的每一个数组
var arr1=arr[i];
//得到数组的第一个值
var firstvalue=arr1[0];
//判断传递过来的第一个值是否相同
if(firstvalue==val){
//相同就得到第一个值后面的元素
for(var j=1;j<arr1.length;j++){
var value1=arr1[j];
//alert(value1);
//创建option标签（三步
var option1=document.createElement("option");
var text1=document.createTextNode(value1);
option1.appendChild(text1);
city1.appendChild(option1);
}
}
}
}
</script>创建一个页面，两个输入框和一个按钮
<body>
行：<input type="text" id="h"/>
列：<input tpe="text" id="l"/>
<br/>
<input type="button" value="生成" οnclick="add2()">
<div id="divv">
</div>
</body>
<script type="text/javascript">
function add2(){
//得到输入的值，生成表格，循环行在行里面循环单元格显示到页面上，
//把表格的代码设置到div里面，使用innerHTML属性
var h=document.getElementById("h").value;
var l=document.getElementById("l").value;
//把表格的代码放到一个变量里面
var tab="<table bordercolor='blue'>";
//循环行
for(var i=1;i<=h;i++){
tab+="<tr>";
//循环列
for(var j=1;j<=l;j++){
tab+="<td>aaaaa</td>";
}
tab+="</tr>";
}
tab+="</table>";
//alert(tab);
var divv=document.getElementById("divv");
//吧tab的代码设置到div里面innerHTML
divv.innerHTML=tab;
}
</script>
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
