目录
- 电灯开关
- 轮播图
- 自动跳转
- window弹框
- 省市联动
- 表格全选
电灯开关
<body>
<img src="../img/off.gif" id="light_off">
<script type="text/javascript">
/*
* 分析:
* 1. 获取图片对象
* 2. 给图片对象绑定单击事件
* 3. 每次点击切换图片
* * 若灯是开的 on, 切换图片为off
* * 若灯是关的 off, 切换图片为on
* 可以使用flag标记来完成
*/
// 获取图片对象
var light_off = document.getElementById("light_off");
// alert(light_off.src);
// 给Light_off设置单击事件
var flag = false; // 灯泡是关闭的状态
light_off.onclick = function () {
if (flag) {
light_off.src = "../img/off.gif";
flag = false;
} else {
light_off.src = "../img/on.gif";
flag = true;
}
}
</script>
</body>
轮播图
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="../img/banner_1.jpg" id="img1">
<script type="text/javascript">
//分析
//1. 在页面上使用img标签展示图片
//2. 定义一个方法, 修改图片对象的src属性
//3. 定义一个定时器,每隔3秒调用方法一次
var img1 = document.getElementById("img1");
var number = 1;
function modifyImage() {
number++;
if (number > 3) {
number = 1;
}
img1.src = "../img/banner_" + number + ".jpg";
}
setInterval(modifyImage, 2000);
</script>
</body>
自动跳转
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style type="text/css">
.time {
color: red;
font-weight: bold;
}
p {
text-align: center;
}
</style>
</head>
<body>
<p>
<span class="time">5</span>秒之后,自动跳转到百度...
</p>
<script type="text/javascript">
// 分析
//1. 显示页面效果
//2. 倒计时读秒效果实现
//2.1 定义一个方法,获取span标签,修改span标签体的内容,时间--
//2. 定义一个定时器, 1s执行一次该方法
//3. 在方法中判断时间若<=0, 则跳转到百度界面
var second = 5;
var span_time = document.getElementsByClassName("time")[0];
function modifyTime() {
second--;
if (second <= 0){
location.href = "https://www.baidu.com";
}
span_time.innerHTML = second +" ";
}
setInterval(modifyTime, 1000);
</script>
</body>
window弹框
index.html
<body>
用户编号:<input id="uid" type="text"><br>
用户姓名:<input id="uname" type="text"><br>
<input id="btn" type="button" value="选择" onclick="open1()">
<script type="text/javascript">
//1. 创建一个页面
//1.1 有两个输入项和一个按钮
//1.2 按钮上有一个时间: 弹出一个新窗口open
//2. 创建弹出页面
//2.1 在页面上创建一个表格
//2.2 每一行有一个按钮和编号和姓名
//2.3 按钮上有一个事件: 把当前的编号和姓名,赋值到页面1的两个输入框内
function open1() {
window.open("user.html","","width=250,height==150");
}
</script>
</body>
user.html
<body>
<table border="1">
<tr>
<td>操作</td>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s('100','张三');"></td>
<td>100</td>
<td>张三</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s('101','李四');"></td>
<td>101</td>
<td>李四</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s('102','王五');"></td>
<td>102</td>
<td>王五</td>
</tr>
</table>
<script>
function s(uid, uname) {
// 跨页面传值,需要用到window的opener属性,创建当前页面父页面的引用
var fwindow = window.opener;
fwindow.document.getElementById("uid").value = uid;
fwindow.document.getElementById("uname").value = uname;
// 关闭窗口
window.close();
}
</script>
</body>
省市联动
<body>
<select id="countryID" onchange="add1(this.value)"> <!--this.value,当前点击的是哪个option就是谁的值-->
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="cityID"></select>
<script>
// 创建一个二维数组存储数据
var arr = new Array(4);
arr[0] = ["中国", "河南", "台湾", "香港", "澳门"];
arr[1] = ["美国", "纽约", "华盛顿", "旧金山", "夏威夷"];
arr[2] = ["德国", "柏林", "慕尼黑", "狼堡", "法兰克林"];
arr[3] = ["日本", "北海道", "广岛", "长崎", "大阪", "东京"];
function add1(val) {
/*
* 1. 遍历二维数组
* 2. 得到也是一个数组(国家对应关系)
* 3. 拿到数组的第一个值和传递过来的值作比较
* 4. 如果相同, 获取到的第一个值后面的元素
* 5. 得到city的select
* 6. 添加过去, 使用appendChild的方法
* - 创建option(三步)
*/
/*
* 由于每次都要想city里面添加option
* 第二次添加, 追加
* - 每次添加之前, 判断一下city里面是否有option,如果有就删除
*/
// 获取city的select
var city1 = document.getElementById("cityID");
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]; // 得到城市的名称
// 创建option
var option1 = document.createElement("option");
// 创建文本
var text1 = document.createTextNode(value1);
// 把文本添加到option1里面
option1.appendChild(text1);
// 添加值到city1里面
city1.appendChild(option1);
}
}
}
}
</script>
</body>
表格全选
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table {
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
margin-top: 10px;
margin-left: 30%;
}
.out {
background-color: white;
}
.over {
background-color: pink;
}
</style>
</head>
<body>
<script>
//1. 在页面加载完后绑定事件
window.onload = function () {
//2. 给全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = true;
}
}
document.getElementById("unSelectAll").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
}
document.getElementById("selectRev").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
// 设置每一个cb状态为相反
cbs[i].checked = !cbs[i].checked;
}
}
document.getElementById("firstCb").onclick = function () {
var cbs = document.getElementsByName("cb");
// 获取第一个Cb
// 因为给第一个添加了事件, 当前的this就是第一个checkbox
for (var i = 0; i < cbs.length; i++) {
// 设置每一个cb状态和第一个cb状态相同
cbs[i].checked = this.checked;
}
}
// 给所有tr绑定鼠标移到元素之上和移出元素事件
var trs = document.getElementsByTagName("tr");
// 遍历
for (var i = 0; i < trs.length; i++) {
// 移到元素之上
trs[i].onmouseover = function () {
this.className = "over";
}
// 移除元素
trs[i].onmouseout = function () {
this.className = "out";
}
}
}
</script>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选" onclick="">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>