javascript简单练习案例
javascript简单练习案例（dom操作）
在末尾添加节点
第一步：获取到ul标签
第二步：创建li标签
document.createElement("标签名称")方法
第三步：创建文本
document.createTextNode("文本内容");
第四步：把文本添加到li下面
使用 appendChild方法
第五步：把里添加到ul末尾
使用 appendChild方法
代码：
<body>
<ul>
<li>aaali>
<li>bbbli>
<li>cccli>
<li>dddli>
ul>
<br>
<input type="button" value="添加" id="nameid" onclick="add1()" />
body>
<script type="text/javascript">
function add1(){
//获取到ul
var ul1=document.getElementsByTagName("ul")[0];/*这里获取到的是多个值*/
//创建li标签
var li1=document.createElement("li");
//创建文本
var text1= document.createTextNode("eee");
//把文本添加到li下面
li1.appendChild(text1);
//吧li添加到ul中
ul1.appendChild(li1);
}
script>动态显示时间
* 得到当前的时间
var date = new Date(); //得到不是常规的格式
var d1 = date.toLocaleString(); //格式化
* 需要让页面每一秒获取时间
setInterval方法 定时器
* 显示到页面上
每一秒向div里面写一次时间
* 使用innerHTML属性
代码：
<body>
<div id="div1">
div>
body>
<script>
function a(){
var datea=new Date();
var div=document.getElementById("div1");
div.innerHTML=datea.toLocaleString();
}
setInterval("a();",1000);
<body>全选练习
- 使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中 - 创建一个页面
** 复选框和按钮
- 四个复选框表示爱好
- 还有一个复选框操作 全选和选不选，也有一个事件 - 三个按钮，分别有事件
- 全选
- 全不选
- 反选
- 全选操作
步骤：
1、获取要操作的复选框
- 使用getElementsByName()
2、返回是数组，
- 属性 checked判断复选框是否选中
* checked = true; //表示选中
* checked = false;//表示不选中
- 遍历数组，得到的是每一个checkbox
* 把每一个checkbox属性checked=true- 全不选操作
步骤
1、获取到要操作的复选框
2、返回的是数组，遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false3.反选操作
步骤
1、获取到要操作的复选框
2、返回数组，遍历数组
3、得到每一个复选框
4、判断当前的复选框是选中还是不选中
5、如果选中，属性checked设置成false，否则，设置成true
4.使用复选框实现全选和全不选
步骤
1、得到上面那个复选框
- 通过id获取到
2、判断这个复选框是否是选中
- if条件，checked==true
3、如果是选中，下面是全选
4、如果不是选中，下面是全不选
代码：
<body>
<input type="checkbox" id="idbox" onclick="check(this)" />全选/全不选<br />
<input type="checkbox" name="love" />张三<br />
<input type="checkbox" name="love" />李四<br />
<input type="checkbox" name="love" />王五<br />
<input type="button" value="全 选" onclick="selall()" /><br />
<input type="button" value="全不选" onclick="selNo()" /><br />
<input type="button" value="反 选" / onclick="selfan()"><br />
body>
<script type="text/javascript">
function selall() {
var love = document.getElementsByName("love");
for(var i = 0; i < love.length; i++) {
var lo = love[i]
lo.checked = true;
}
}
function selNo() {
var love = document.getElementsByName("love");
for(var i = 0; i < love.length; i++) {
var lo = love[i]
lo.checked = false;
}
}
function selfan() {
var love = document.getElementsByName("love");
for(var i = 0; i < love.length; i++) {
var lo = love[i]
lo.checked = !lo.checked;
}
}
function check(d) {
//var d=document.getElementById("idbox");
if(d.checked) {
selall()
} else {
selNo();
}
}
script>下拉列表左右选择
* 下拉选择框
* 创建一个页面
** 两个下拉选择框
- 设置属性 multiple属性
** 四个按钮，有事件
* 选中添加到右边
步骤
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组，得到每一个option
2、判断option是否被选中
- 属性 selected，判断是否被选中
** selected= true: 选中
** selected= false：没有选择
3、如果是选中，把选择的添加到右边去
4、得到select2
4、添加选择的部分
- appendChild方法
* 全部添加到右边
步骤
1、获取第一个select下面的option对象
2、返回数组，遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
* 选中添加到左边
步骤
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件 属性 selected == true：选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
* 全部添加到左边
步骤
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、获取到select1
5、添加到select1里面
- 使用appendChild方法
代码
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
select {
width: 100px;
height: 200px;
}
style>
head>
<body>
<div id="">
<select id="s1" name="left" multiple="multiple">
<option value="aaa">aaaoption>
<option value="bbb">bbboption>
<option value="ccc">cccoption>
<option value="ddd">dddoption>
<option value="eee">eeeoption>
select>
<select id="s2" name="right" multiple="multiple">
<option value="fff">fffoption>
select>
div>
<div id="">
<input type="button" value="全部添加到右边" onclick="quanaddright()" />
<input type="button" value="全部添加到左边" onclick="quanaddleft()" />
div>
<div>
<input type="button" value="选中添加到右边" onclick="xuanaddright()" />
<input type="button" value="选中添加到左边" onclick="xuanaddleft()" />
div>
<script type="text/javascript">
function quanaddright() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var op = s1.getElementsByTagName("option");
for(var i = 0; i < op.length;) {
var o = op[0]
//document.writeln(o.innerHTML);
//alert(op.length+"i="+i);
s2.appendChild(o);
}
}
function quanaddleft() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var op = s2.getElementsByTagName("option");
for(var i = 0; i < op.length;) {
var o = op[0]
//document.writeln(o.innerHTML);
//alert(op.length+"i="+i);
s1.appendChild(o);
}
}
function xuanaddright() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var op = s1.getElementsByTagName("option");
for(var i = 0; i < op.length;) {
var o = op[i]
if(o.selected) {
s2.appendChild(o);
} else {
i++;
}
}
}
function xuanaddleft() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var op = s2.getElementsByTagName("option");
for(var i = 0; i < op.length;) {
var o = op[i]
if(o.selected) {
s1.appendChild(o);
} else {
i++;
}
}
}
script>
body>省市（国家/城市）联动
* 创建一个页面，有两个下拉选择框
* 在第一个下拉框里面有一个事件 ：改变事件 onchange事件
- 方法add1(this);表示当前改变的option
* 创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
1、遍历二维数组
2、得到也是一个数组（国家对应关系）
3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同，获取到第一个值后面的元素
5、得到city的select
6、添加过去（使用）appendChild方法
- 创建option（三步）
由于每次都要向city里面添加option
第二次添加，会追加。
每次添加之前，把city的innerHTML=""；
代码：
<body>
<select name="countray" id="countray" onchange="add12(this);">
<option value="0">--请选择--option>
<option value="中国">中国option>
<option value="美国">美国option>
<option value="德国">德国option>
<option value="日本">日本option>
select>
<select name="city" id="city">
<option value="0">--请选择--option>
select>
<script type="text/javascript">
var arr = new Array(4);
arr[0] = ["中国", "南京", "北京", "上海", "天津", "河南", "日喀则", "哈密"];
arr[1] = ["美国", "华盛顿", "纽约", "底特律", "休斯顿"];
arr[2] = ["德国", "慕尼黑", "柏林", "法兰克福", "狼堡"];
arr[3] = ["日本", "东京", "大阪", "北海道", "长崎", "广岛"];
function add12(val) {
alert(val.value);
for(var i = 0; i < arr.length; i++) {
var v = arr[i];
if(v[0]==val.value) {
var d = document.getElementById("city");
d.innerHTML="";
for(var j = 0; j < v.length; j++) {
var a = v[j];
if(j==0){
a="--请选择--";
}
var b = document.createElement("option");
var c = document.createTextNode(a);
b.appendChild(c);
d.appendChild(b);
}
}
}
}
script>
body>动态生成表格
*创建一个页面：两个输入框和一个按钮和一个div
步骤
1、得到输入的行和列的值
2、生成表格
** 循环行
** 在行里面循环单元格
3、显示到页面上
- 把表格的代码设置到div里面
- 使用innerHTML属性
代码：
<body>
行：<input type="text" id="row" /><br>
列：<input type="text" id="col" /><br />
<input type="button" value="生成" id="sub" onclick="shengcheng()"/><br />
<div id="table">
div>
body>
<script type="text/javascript">
function shengcheng(){
var row=document.getElementById("row").value;
var col=document.getElementById("col").value;
var tab=""
for (var i = 0; i < row; i++) {
tab+=""
for (var j= 0; j< col; j++) {
tab+="";
tab+=" ";
}
tab+=" ";
}
tab+="
";
var div=document.getElementById("table");
div.innerHTML=tab;
}
script>