1、全选/全不选
要求如下
1)当点击全选时,所有的选项都被勾选
2)当点击取消时,所有被勾选的选项都被取消
代码如下
<div id="box1">
<input type="checkbox" name="" onclick="allElection()">全选/全不选
</div>
<div id="box">
<input type="checkbox" name="election" id="">JavaScript
<input type="checkbox" name="election" id="">Java<br>
<input type="checkbox" name="election" id="">python
<input type="checkbox" name="election" id="">JavaWeb
</div>
<script>
/*
1.实现全选/全不选功能
*/
var quanXuan = document.getElementById("box1").children[0];//找到全选/全不选的按钮
var election = document.getElementById("box").children;//找到选项
function allElection() {
for (var i = 0, len = election.length; i < len; i++) {//循环找到所有的复选框中的选项
election[i].checked = quanXuan.checked;//将所有的选项都和全选/全不选按钮保持一致
}
}
</script>
待解决的问题
当选项都被勾选时,全选框应被勾选;但由于学习知识不够的原因尚无法解决。
2、根据输入的行和列数值,创建对应行列的表格
要求如下
1)当输入行数和列数时,点击创建表格就应该创出相应的表格
2)应创出相应的th标签
难点
1)创建th
2)循环创出td
3)逻辑嵌套
引申:向创出的表格内输入数据
代码如下
行数:<input type="text" id="tx1">
列数:<input type="text" id="tx2">
<button id="btn">创建表格</button>
<script>
//创建表格的点击事件
btn.onclick = function () {
var rowNum = document.getElementById('tx1').value; //获取行数的值
var colNum = document.getElementById('tx2').value; //获取单元格的值
var btn = document.getElementById('btn'); //找到按钮
// rowNum = rowNum.value;
// colNum = colNum.value;
// console.log(rowNum, colNum, btn)
//判断行数和列数都要大于0
if (rowNum > 0 && colNum > 0) {
//创建table标签
var tab = document.createElement('table');
//将table标签显示到HTML
document.body.appendChild(tab);
//创建thead标签
var tab_the = document.createElement('thead');
//将thead标签显示在table标签内
tab.appendChild(tab_the);
//创建tr标签
var the_tr = document.createElement('tr');
//将tr标签显示在thead标签内
tab_the.appendChild(the_tr);
//创建多个th标签
for (var i = 0; i < colNum; i++) {
//创建一个th标签
var the_th = document.createElement('th');
//将th标签显示在thead标签的tr标签内
the_tr.appendChild(the_th);
}
//创建tbody标签
var tab_tbo = document.createElement('tbody');
//将tbody标签显示在table标签内
tab.appendChild(tab_tbo);
//创建多个tbody标签的tr标签
for (var i = 0; i < rowNum; i++) {
//创建一个tr标签
var tbo_tr = document.createElement("tr");
//将创建的tr标签显示在tbody标签中
tab_tbo.appendChild(tbo_tr);
//创建多个td单元格
for (var j = 0; j < colNum; j++) {
//创建一个td单元格
var tbo_td = document.createElement("td");
//将td标签现实在tr标签中
tbo_tr.appendChild(tbo_td);
}
}
}
}
</script>
3、根据姓名、ID、年龄输入框的值
要求如下
1)创建对应的表格
2)点击删除按钮,删除对应的行
难点如下
1)创建表头(th)
2)增加表格
3)增加表格时,再次传值
4)删除操作
代码如下
<style>
table {
text-align: center;
}
td,
th {
/* margin: 8px 10px; */
padding: 4px 10px;
}
</style>
ID号:<input type="text" id="tx1">
姓名:<input type="text" id="tx2">
年龄:<input type="text" id="tx3">
<button id="tx4">创建表格</button>
<button id="tx5">增添表格</button>
<script>
function getEle(id) {
return document.getElementById(id)
}
var num1 = getEle('tx1'); //获取ID
var sName = getEle('tx2'); //获取姓名
var age = getEle("tx3") //获取年龄
var btn = getEle("tx4"); //创建表格
var btn1 = getEle("tx5");//增添表格
//1.创建表格对象
var tab = document.createElement('table');
//2.创条thead
var tHead = document.createElement('thead');
//3.创建表头行
var th_tr = createTR('ID', '姓名', "年龄", '操作', 'th');
btn.onclick = function () {
num1 = num1.value; //获取ID的值
sName = sName.value; //获取名字的值
age = age.value; //获取年龄的值
//将行放入thead中
tHead.appendChild(th_tr);
//将thead放入表格中
tab.appendChild(tHead);
//5.创建表格内容行
//5-1 创建tbody
var tBody = document.createElement('tbody');
//5-2 创建内容行
var tr1 = createTR(num1, sName, age, "<a href='#' οnclick='del(this)'>删除</a>", 'td');
//将行插入tbody
tBody.appendChild(tr1);
//将tobody插入表格中
tab.appendChild(tBody);
//最后
document.body.appendChild(tab);
//增添表格
btn1.onclick = function () {
var num1 = getEle('tx1').value;
var sName = getEle('tx2').value;
var age = getEle('tx3').value;
console.log(num1);
//5-2 创建内容行
var tr1 = createTR(num1, sName, age, "<a href='#' οnclick='del(this)'>删除</a>", 'td');
//将行插入tbody
tBody.appendChild(tr1);
//将tobody插入表格中
tab.appendChild(tBody);
}
}
//创建行
function createTR(id, sName, age, op, tag) {
var tr = document.createElement('tr');
// 创建内容列
var td1 = createCell(tag, id); //id
var td2 = createCell(tag, sName); //姓名
var td3 = createCell(tag, age); //年龄
var td4 = createCell(tag, op);
//将列加入行内
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
return tr; //返回创建的行
}
//创建列 td,th
function createCell(tag, cnt) {
var td = document.createElement(tag);
td.innerHTML = cnt;
return td;
}
//删除事件
function del(obj) {
// alert(obj);
// console.log(obj);//a
var tr = obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
</script>
4、实现幻灯片效果
要求如下
每隔2秒钟,切换一张图片
难点如下
1)找到图片
2)改变图片的路径
3)计时操作(函数的调用)
代码如下
<style>
img {
width: 500px;
margin: 100px 30%;
}
</style>
<img src="images/1.jpg" alt="">
<script>
//找到img
var pic = document.images;
//定义计数器
var n = 1;
// console.log(pic[0].src);//查看图片地址
function slide() {
if (n != 6) {
pic[0].src = "images/" + n + ".jpg";
} else {
n = 0;
}
n++;
// console.log(n);
setTimeout(slide, 2000)
}
slide();
</script>