1. 加乘法运算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
input{
width: 50px;
}
</style>
</head>
<body>
<input type="text" id="t1">
<span> + </span>
<input type="text" id="t2">
<span> = </span>
<input type="text" id="t3" disabled="disabled">
<input type="submit" value="运算" onclick="add()">
<br>
<br>
<input type="text" id="t4">
<span> * </span>
<input type="text" id="t5">
<span> = </span>
<input type="text" id="t6" disabled="disabled">
<input type="submit" value="运算" onclick="mul()">
<br>
<input type="submit" value="清空" onclick="fun()">
<script type="text/javascript">
function add(){
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
t3.value = parseInt(t1.value) + parseInt(t2.value);
}
function mul(){
var t4 = document.getElementById("t4");
var t5 = document.getElementById("t5");
var t6 = document.getElementById("t6");
t6.value = parseInt(t5.value) * parseInt(t4.value);
}
function fun() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var t4 = document.getElementById("t4");
var t5 = document.getElementById("t5");
var t6 = document.getElementById("t6");
t1.value = "";
t2.value = "";
t3.value = "";
t4.value = "";
t5.value = "";
t6.value = "";
}
</script>
</body>
</html>2. 下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a{
text-decoration: none;
}
.wea{
height: auto;
width: auto;
}
table{
border: 1px solid gray;
width: 80px;
}
td{
padding-left: 5px;
text-indent: 5px;
line-height: 1.5;
padding-right: 15px;
}
td:hover{
background-color: red;
}
</style>
</head>
<body>
<a href="#" onmousemove="fun1()">武器</a>
<a href="#" onmousemove="fun2()">护甲</a>
<a href="#" onmousemove="fun3()">英雄</a>
<div id="weapon" style="display:none" class="wea">
<table>
<tr>
<td>大剑</td>
</tr>
<tr>
<td>倚天</td>
</tr>
<tr>
<td>屠龙</td>
</tr>
<tr>
<td>哈哈哈</td>
</tr>
</table>
</div>
<div id="armor" style="display:none;position: absolute; left: 40px;">
<table>
<tr>
<td>胸甲</td>
</tr>
<tr>
<td>护腕</td>
</tr>
<tr>
<td>头盔</td>
</tr>
<tr>
<td>鞋子</td>
</tr>
</table>
</div>
<div id="hero" style="display:none;position: absolute; left: 80px;">
<table>
<tr>
<td>盖伦</td>
</tr>
<tr>
<td>死歌</td>
</tr>
<tr>
<td>安妮</td>
</tr>
<tr>
<td>提莫</td>
</tr>
</table>
</div>
<script type="text/javascript">
function fun1() {
var we = document.getElementById("weapon");
var ar = document.getElementById("armor");
var he = document.getElementById("hero");
we.style.display = "block";
ar.style.display = "none";
he.style.display = "none";
}
function fun2() {
var we = document.getElementById("weapon");
var ar = document.getElementById("armor");
var he = document.getElementById("hero");
we.style.display = "none";
ar.style.display = "block";
he.style.display = "none";
}
function fun3() {
var we = document.getElementById("weapon");
var ar = document.getElementById("armor");
var he = document.getElementById("hero");
we.style.display = "none";
ar.style.display = "none";
he.style.display = "block";
}
</script>
</body>
</html>3. 选择框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a{
text-decoration: none;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" onclick="selectAll(this)">
<span>全选</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
<span>toyko hot</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
<span>dota</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
<span>lol</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
<span>wow</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
<span>warcraft</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
<span>diablo</span>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="reverse()">反选</a>
</td>
</tr>
</table>
<script type="text/javascript">
function selectAll(checkbox) {
var checked = checkbox.checked;
var all = document.getElementsByTagName('input');
for (var i = 0; i < all.length; i++) {
all[i].checked = checked?"checked":"";
}
}
function reverse() {
var all = document.getElementsByTagName('input');
for(var i in all){
if (i==0)
continue;
all[i].checked = all[i].checked?"":"checked";
}
}
</script>
</body>
</html>4. 动态加载 js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function loadJS(){
//创建一个节点
var newScript = document.createElement('script');
//设置节点要引用的 js
newScript.src = 'http://how2j.cn/study/test3041.js';
//通过 js 标签名取得第一个 js 文件
var firstScript = document.getElementsByTagName("script")[0];
//在其后追加该 js 文件
firstScript.appendChild(newScript);
}
</script>
<button onclick="loadJS()">test3041.js</button>
</body>
</html>5. 动态建表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table{
border-collapse:collapse;
width:30%;
}
tr.odd{
background-color:#f8f8f8;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
</head>
<body>
<div id="parentDiv">
<button onclick="fun()">点我建表</button>
</div>
<script type="text/javascript">
function fun() {
function createTD(text){
var td = document.createElement("td");
var content = document.createTextNode(text);
td.appendChild(content);
return td;
}
function createTR(row){
var tr = document.createElement("tr");
for (var i = 0; i < row.length; i++) {
var td = createTD(row[i]);
tr.appendChild(td);
}
return tr;
}
function createTable(rows){
var table = document.createElement("table");
for (var i = 0; i < rows.length; i++) {
var tr = createTR(rows[i]);
table.appendChild(tr);
}
return table;
}
var row0 = new Array("id","名称","血量","伤害");
var row1 = new Array("1","gareen","340","58");
var row2 = new Array("2","teemo","320","76");
var row3 = new Array("3","annie","380","38");
var row4 = new Array("4","deadbrother","400","90");
var rows = new Array(row0,row1,row2,row3,row4);
var table = createTable(rows);
var parentDiv = document.getElementById("parentDiv");
parentDiv.appendChild(table);
}
</script>
</body>
</html>6. 动态换图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="parentDiv">
<img src="1.png" onmousemove="fun1()" onmouseout="fun2()" id="img">
</div>
<script type="text/javascript">
function fun1() {
var img = document.getElementById("img");
img.src="2.png";
}
function fun2() {
var img = document.getElementById("img");
img.src="1.png";
}
</script>
</body>
</html>7. 删除提醒
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table {
width: 300px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>英雄名称</td>
<td>操作</td>
</tr>
<tr>
<td>盖伦</td>
<td><a href="#" onclick="delectRow(this)">删除</a></td>
</tr>
<tr>
<td>提莫</td>
<td><a href="#" onclick="delectRow(this)">删除</a></td>
</tr>
<tr>
<td>祈求者</td>
<td><a href="#" onclick="delectRow(this)">删除</a></td>
</tr>
</table>
<script type="text/javascript">
function delectRow(a){
var flag = confirm("确认删除？");
if(flag){
var td = a.parentNode;
var tr = td.parentNode;
var table = tr.parentNode;
table.removeChild(tr);
}
}
</script>
</body>
</html>8. 显示和隐藏元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="t">哈哈哈</div>
<button onclick="fun1()">显示</button>
<button onclick="fun2()">隐藏</button>
<script type="text/javascript">
function fun1() {
var t = document.getElementById('t');
t.style.display ="block";
}
function fun2() {
var t = document.getElementById('t');
t.style.display ="none";
}
</script>
</body>
</html>来源：how2j