1.实现简单的计算机功能
效果图
<body>
<input type="text" id="text_op1">
<select id="slt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" id="text_op2">
<button id="btn">=</button>
<input type="text" id="sum">
<script>
var btn = document.getElementById('btn');
var text1 = document.getElementById('text_op1');
var text2 = document.getElementById('text_op2');
var sum = document.getElementById('sum');
var slt = document.getElementById('slt');
var sumRel;
btn.onclick = function () {
switch (slt.value) {
case "+":
sumRel = parseFloat(text1.value) + parseFloat(text2.value);
break;
case "-":
sumRel = text1.value - text2.value;
break;
case "*":
sumRel = text1.value * text2.value;
break;
case "/":
sumRel = text1.value / text2.value;
break;
}
sum.value = sumRel;
}
</script>
</body>
2.实现全选/反选的功能
效果图
第一种方法
<body>
<input type="checkbox" id="check"> 全选/反选<br><br><br>
<div id="ip">
<input type="checkbox">JavaScript<br>
<input type="checkbox">NodeJS<br>
<input type="checkbox">vue<br>
<input type="checkbox">react<br>
<input type="checkbox">angular<br>
</div>
</body>
<script>
var oCheck = document.getElementById('check');
var oIp = document.getElementById('ip');
var len = oIp.children.length;
oCheck.onclick = function () {
if (oCheck.checked == true) {
for (var i = 0; i < len; i++) {
oIp.children[i].checked = true;
}
} else {
for (var i = 0; i < len; i++) {
oIp.children[i].checked = false;
}
}
}
</script>
第二种方法
<input type="checkbox" onclick="allcheck(this)" id="btn"> 全选/反选<br>
<div>
<input type="checkbox" name="ipn">JavaScript<br>
<input type="checkbox" name="ipn">NodeJS<br>
<input type="checkbox" name="ipn">vue<br>
<input type="checkbox" name="ipn">react<br>
<input type="checkbox" name="ipn">angular<br>
</div>
<script>
function allcheck(currentobj) {
var ipn = doucment.getElementsByName('ipn');
if (currentobj.checked) {
for (var i = 0; i < ipn.length; i++) {
ipn[i].checked = true;
}
} else {
for (var i = 0; i < ipn.length; i++) {
ipn[i].checked = false;
}
}
}
function allcheck() {
var ipn = document.getElementsByName('ipn');
for (var i = 0; i < ipn.length; i++) {
if (ipn[i].checked) {
ipn[i].checked = false;
} else {
ipn[i].checked = true;
}
}
}
</script>
3.输入数据并完成表单的添加 及删除 并且完成编号按顺序排列,编号删除后依旧按本来的顺序
示意图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
text-align: center;
}
table {
width: 500px;
border: 1px solid gray;
border-collapse: collapse;
margin: 50px auto;
}
thead tr {
background: #ccc;
}
th,
td {
line-height: 35px;
border: 1px solid gray;
text-align: center;
}
</style>
</head>
<body>
<div>
<label for="">用户名:</label>
<input type="text" id="txt1">
<label for="">年龄:</label>
<input type="text" id="txt-pwd">
<button id="btn">添加</button>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody id="box">
<tr>
<td>0</td>
<td>jack</td>
<td>20</td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var txtName = document.getElementById('txt1'),
txtPwd = document.getElementById('txt-pwd');
var j = 0;
document.getElementById('btn').onclick = function () {
// console.log(txtName.value);//输入框
// console.log(txtPwd.value);//密码框
j++;
var box = document.getElementById('box');
var tr1 = document.createElement('tr');
box.appendChild(tr1);
var box1 = document.createElement('td');//第一个td
tr1.appendChild(box1);
box1.innerHTML = j;
var box2 = document.createElement('td'); //第二个td
tr1.appendChild(box2);
var text = document.createTextNode(txtName.value);//添加 txtName.value用户名
box2.appendChild(text);
var box3 = document.createElement('td');//第三个td
tr1.appendChild(box3);
var text1 = document.createTextNode(txtPwd.value);//添加text.value 年龄
box3.appendChild(text1);
var box4 = document.createElement('td');第四个td
tr1.appendChild(box4);
box4.innerHTML = "<a href='javascript: void (0)'>删除</a>";
var len = document.links.length;//添加删除效果
for (var i = 0; i < len; i++) {
document.links[i].onclick = function () {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
};
}
}
添加原有第一个tr的删除效果
document.links[0].onclick = function () {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
};
</script>
</body>
</html>