JavaScript简单案例（1）
一些简单的JS案例，有利于巩固基础
1.动态显示时间
在网页上动态显示当前时间
要点：- 定时器 setInterval：某个时间内重复执行js代码
<html>
<head>
<title>HTML示例title>
<style type="text/css">
style>
head>
<body>
<div id="div1">
div>
<script type="text/javascript">
function getD1()
{
//获取时间
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div1 = document.getElementById("div1");
div1.innerHTML = d1;
}
//使用定时器实现一秒写一次时间
setInterval("getD1()",1000);
script>
body>
html>运行结果：
2.全选练习
实现全选，全不选，反选功能
要点：- 属性： checked=true：复选框是选中，false是不选中
<html>
<head>
<title>HTML示例title>
<style type="text/css">
style>
head>
<body>
<input type="checkbox" id="boxid" onclick="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="全选" onclick="selAll()"/>
<input type="button" value="全不选" onclick="selNo()"/>
<input type="button" value="反选" onclick="selOther()"/>
<script type="text/javascript">
function selAllNo()
{
/*
1.得到复选框
2.判断是否选中
*/
var box1 = document.getElementById("boxid");
if(box1.checked == true)
{
selAll();
}
else{
selNo();
}
}
function selOther()
{
loves = document.getElementsByName("love");
for(var i=0; iif (love1.checked == true)
{
love1.checked = false;
}
else
{
love1.checked = true;
}
}
}
//实现全选的操作
function selAll()
{
/*
1.获取要操作的复选框
-使用getElementsByName()
2.返回是数组
-判断复选框是否选中
checked = true
-遍历数组
*/
var loves = document.getElementsByName("love");
for(var i=0; ivar love1 = love[i];
love1.checked = true;
}
}
function selNo()
{
var loves = document.getElementsByName("love");
for(var i=0; ifalse;
}
}
script>
body>
html>
运行结果：
3.下拉列表左右选择
要点：
- select下拉列表里面属性 multiple：让下拉框里面的内容都显示出来
- 属性：selected=true：option是选中，false：option不是选中
<html>
<head>
<title>HTML示例title>
<style type="text/css">
style>
head>
<body>
<div id="div1" style="float:left">
<div>
<select id="selid1" multiple="multiple" style="height:100px;width:100px">
<option>AAAAoption>
<option>BBBBoption>
<option>CCCCoption>
<option>DDDDoption>
select>
div>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight()"/>
<br>
<input type="button" value="全部添加到右边" onclick="allToRight()"/>
div>
div>
<div>
<div>
<select id="selid2" multiple="multiple" style="height:100px;width:100px">
<option>EEEEoption>
select>
div>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft()"/>
<br>
<input type="button" value="全部添加到左边"
onclick="allToLeft()"/>
<div>
div>
<script type="text/javascript">
function selToRight()
{
/*
1.获取select1里面的option
2.判断option是否被选中
3.如果选中，添加到右边
4.得到select2
5.添加选择的部分
*/
var select1 = document.getElementById("selid1");
var select2 = document.getElementById("selid2");
var options1 = select1.getElementsByTagName("option");
for(var i=0; ivar option1 = options1[i];
if(option1.selected == true)
{
select2.appendChild(option1);
i--;
}
}
}
function allToRight()
{
var select1 = document.getElementById("selid1");
var select2 = document.getElementById("selid2");
var options1 = select1.getElementsByTagName("option");
for(var i=0; ivar option1 = options1[i];
select2.appendChild(option1);
i--;
}
}
function selToLeft()
{
/*
1.获取select2里面的option
2.判断option是否被选中
3.如果选中，添加到右边
4.得到select1
5.添加选择的部分
*/
var select1 = document.getElementById("selid1");
var select2 = document.getElementById("selid2");
var options1 = select2.getElementsByTagName("option");
for(var i=0; ivar option1 = options1[i];
if(option1.selected == true)
{
select1.appendChild(option1);
i--;
}
}
}
function allToLeft()
{
var select1 = document.getElementById("selid1");
var select2 = document.getElementById("selid2");
var options1 = select2.getElementsByTagName("option");
for(var i=0; ivar option1 = options1[i];
select1.appendChild(option1);
i--;
}
}
script>
body>
html>
运行结果：
