在末尾添加节点
//获取到ul标签
var ul1=document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var text1 = document.createTextNode("aaa");
//把文本添加到li下边
li1.appendChild(text1);
//把li添加到ul下边
ul1.appendChild(li1);
动态显示时间
<div id="times">
</div>
<script type="text/javascript">
function getD1(){
//当前时间
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
//定时器实现
setInterval("getD1()",1000);
</script>
checkbox全选
1.全选按钮
function selAll(){
//获取要操作的checkbox,返回数组
var names = document.getElementsName("names");
//遍历数组,使用checked属性
for(var i=0;i<names.length;i++){
var name1 = names[i];
name1.checked = true;
}
}
2.全不选按钮
function selNo(){
//获取要操作的checkbox,返回数组
var names = document.getElementsName("names");
//遍历数组,使用checked属性
for(var i=0;i<names.length;i++){
var name1 = names[i];
name1.checked = false;
}
}
3.反选按钮
function selOther(){
//获取要操作的checkbox,返回数组
var names = document.getElementsName("names");
//遍历数组,使用checked属性
for(var i=0;i<names.length;i++){
var name1 = names[i];
if(name1.checked == false){
name1.checked=true;
}else{
name1.checked=false;
}
}
}
4.全选checkbox
function selAllNo(){
//获取checkbox
var check1=document.getElementById("checkbox1");
if(check1.checked==true){
selAll();
}else{
selNo();
}
}
下拉列表左右选择
1.设置两个下拉框
<select id="select1" multiple="multiple">
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<select id="select2" multiple="multiple">
<option></option>
<option></option>
</select>
<script type="text/javascript">
</script>
2.选中添加到右边按钮
function selToRight(){
//获取左边的option
var sel1 = document.getElementById("select1");
var opt1 = sel1.getElementsByTagName("option");
//获取右边的select
var sel2 = document.getElementById("select2");
//遍历,判断是否被选中
for(var i=0;i<opt1.length;i++){
var option1 = opt1[i];
if(option1.selected==true){
sel2.appendChild(option1);
i--;//因为length不断变化
}
}
}
3.全部添加到右边按钮
function selAllToRight(){
//获取左边的option
var sel1 = document.getElementById("select1");
var opt1 = sel1.getElementsByTagName("option");
//获取右边的select
var sel2 = document.getElementById("select2");
//遍历,判断是否被选中
for(var i=0;i<opt1.length;i++){
var option1 = opt1[i];
sel2.appendChild(option1);
i--;//因为length不断变化
}
}
省市联动
创建两个下拉框
第一个下拉框设置onchange事件
<select id="countryid" onchange="add1(this.value)">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
</select>
创建一个数组存储数据
var arr=new Array(4);
arr[0] = ["中国","北京","南京","上海"];
arr[1] = ["美国","芝加哥","华盛顿","纽约"];
arr[2] = ["日本","东京","北海道","大阪"];
function add1(val){
//由于每次都要向city添加option导致每次追加
//判断添加前是否有option
var city1 = document.getElementById("cityid");
var options1 = city1.getElementsByTagName("option");
for(var m=0;m<options1.length;m++){
//得到每一个option
var op = options1[m];
city1.removeChild(op);
m--;
}
//遍历二维数组
for(var i=0;i<arr.length;i++){
//得到二维数组中的每一个数组
var arr1=arr[i];
//得到遍历后的数组的第一个值
var first = arr1[0];
//判断传递的值与其是否相同
if(first == val){
//得到第一个值后边的元素
for(var j=1;j<arr1.length;j++){
var value1 = arr[j];
//创建option
var option1 = document.createElement("option");
//创建文本
var text1 = document.createTextNode(value1);
//把文本添加到option
option1.appendChild(text1);
}
}
}
}
动态生成表格
输入行数,列数,显示表格
function add1(){
//得到输入的行和列的值
var h= document.getElementById("hang").value;
var l= document.getElementById("lie").value;
//生成表格
//把表格放到一个变量里
var tab= "<tabe>";
//循环行
for(var i=i;i<=h;i++){
tab+="<tr>"
//循环单元格
for(var j=1;j<=l;j++){
tab += "<td>123</td>"
}
tab+="</tr>"
}
tab +="</table>"
var divv = document.getElementById("divv");
//把table的代码设置到div中
divv.innerHTML=tab;
}