HTML：
用户注册：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="">
<table width="300" border="0">
<tr bgcolor="darkgray">
<td colspan="2" style="text-align: center;">用 户 注 册</td>
</tr>
<tr bgcolor="darkgray">
<td style="text-align: right;">用 户 名</td>
<td><input type="text" value="abc" id="inputId" name="inputName" max="200" min="1"/></td>
</tr>
<tr bgcolor="darkgray">
<td style="text-align: right;">密 码</td>
<td><input type="password"/></td>
</tr>
<tr bgcolor="darkgray">
<td style="text-align: right;">性 别</td>
<td><input type="radio" name="sex" id="male"/>
<label for="male">男</label>
<input type="radio" name="sex"/>女</td>
</tr>
<tr bgcolor="darkgray">
<td style="text-align: right;">爱 好</td>
<td><input type="checkbox" name="fav"/>足球
<input type="checkbox" name="fav"/>篮球
<input type="checkbox" name="fav"/>LOL
<input type="checkbox" name="fav"/>韩剧</td>
</tr>
<tr bgcolor="darkgray">
<td style="text-align: right;">省 份</td>
<td><select name="下拉列表">
<option value="xian">陕西省</option>
<option value="">河北省</option>
<option value="">广东省</option>
</select></td>
</tr>
<tr bgcolor="darkgray">
<td style="text-align: right;">自我介绍</td>
<td>
<textarea name="comment" rows="5" cols="25"placeholder="简介"></textarea>
</td>
</tr>
<tr bgcolor="darkgray">
<td colspan="2" style="text-align: center;">
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
电子汇款单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2 style="font-family: '黑体';">工商银行电子汇款单</h2>
<table border="1" cellspacing="0">
<tr>
<td colspan="2"><b>回单类型</b></td>
<td colspan="4">网上转账汇款</td>
<td colspan="2"><b>指令序列号</b></td>
<td colspan="4">HQH10000000001000100</td>
</tr>
<tr>
<td rowspan="4"><b>收款人</b></td>
<td colspan="1"><b>户名</b></td>
<td colspan="4">老牟</td>
<td rowspan="4"><b>付款人</b></td>
<td colspan="1"><b>户名</b></td>
<td colspan="4">老六</td>
</tr>
<tr>
<td colspan="1"><b>卡号</b></td>
<td colspan="4">00000000001</td>
<td colspan="1"><b>卡号</b></td>
<td colspan="4">00000000002</td>
</tr>
<tr>
<td colspan="1"><b>地点</b></td>
<td colspan="4">南京</td>
<td colspan="1"><b>地点</b></td>
<td colspan="4">杭州</td>
</tr>
<tr>
<td colspan="1"><b>网点</b></td>
<td colspan="4">工商江苏南京业务处理中心</td>
<td colspan="1"><b>网点</b></td>
<td colspan="4">江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<td colspan="4">人民币</td>
<td colspan="2"><b>汇钞标准</b></td>
<td colspan="4">钞票</td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td colspan="4">100000元</td>
<td colspan="2"><b>手续费</b></td>
<td colspan="4">100元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td colspan="10">人民币（大写）：拾万元整</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td colspan="4">2023年2月18日</td>
<td colspan="2"><b>时间戳</b></td>
<td colspan="4">2023年2月18日22:06:20，000000</td>
</tr>
</table>
<p>票据打印时间：2023-02-18 22:06:20
<br>
<del>票据打印单位：江苏徐州业务中心</del>
<br>
操作员：老曾
</p>
</body>
</html>
李白诗词
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="0" cellpaddiing="0" cellspacing="0" width="650">
<tr>
<td colspan="2"><font size="6"><b>将进酒</b></font>
<font size="5"><b>君不见黄河之水天上来</b></font></td>
</tr>
<tr>
<td rowspan="14" width="200" align="center"><img src="img/李白诗词.png"></td>
</tr>
<tr>
<td>君不见黄河之水天上来，奔流到海不复回。</td>
</tr>
<tr>
<td>君不见高堂明镜悲白发，朝如青丝暮成雪.</td>
</tr>
<tr>
<td>人生得意须尽欢，莫使金樽空对月。</td>
</tr>
<tr>
<td>天生我材必有用，千金散尽还复来。</td>
</tr>
<tr>
<td>烹羊宰牛且为乐，会须一饮三百杯。</td>
</tr>
<tr>
<td>岑夫子，丹丘生，将进酒，杯莫停.</td>
</tr>
<tr>
<td>与君歌一曲，请君为我倾耳听。</td>
</tr>
<tr>
<td>钟鼓馔玉不足贵，但愿长醉不复醒。</td>
</tr>
<tr>
<td>古来圣贤皆寂寞，惟有饮者留其名。</td>
</tr>
<tr>
<td>陈王昔时宴平乐，斗酒十千恣欢谑。</td>
</tr>
<tr>
<td>主人何为言少钱，径须沽取对君酌。</td>
</tr>
<tr>
<td>五花马、千金裘，</td>
</tr>
<tr>
<td>呼儿将出换美酒，与尔同销万古愁。</td>
</tr>
</table>
</body>
</html>
豆瓣电影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>热门电影板块</h1>
<hr>
<table border="0" cellspacing="0" width="1000">
<tr>
<td><font size="5"><b>最近热门电影</b></font></td>
<td align="center"><font size="5">热门</font></td>
<td align="center"><font size="5">最新</font></td>
<td align="center"><font size="5">豆瓣高分</font></td>
<td align="center"><font size="5">冷门佳片</font></td>
<td align="center"><font size="5">华语</font></td>
<td align="center"><font size="5">欧美</font></td>
<td align="center"><font size="5">韩国</font></td>
<td align="center"><font size="5">日本</font></td>
<td align="center"><font size="5">更多>></font></td>
</tr>
</table>
<hr>
<table border="0" cellspacing="0">
<tr>
<td><img src="img/猜火车.png"></td>
<td><img src="img/贝尔科实验.png"></td>
<td><img src="img/加州公路巡警.png"></td>
<td><img src="img/歌声不绝.png"></td>
</tr>
<tr>
<td>猜火车 8.1</td>
<td>贝尔科实验 6.0</td>
<td>加州公路巡警 6.8</td>
<td>歌声不绝 6.3</td>
</tr>
<tr>
<td><img src="img/猜火车.png"></td>
<td><img src="img/贝尔科实验.png"></td>
<td><img src="img/加州公路巡警.png"></td>
<td><img src="img/歌声不绝.png"></td>
</tr>
<tr>
<td>猜火车 8.1</td>
<td>贝尔科实验 6.0</td>
<td>加州公路巡警 6.8</td>
<td>歌声不绝 6.3</td>
</tr>
</table>
</body>
</html>
JavaScript案例
抽奖案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
height: 800px;
border: 1px dashed red;
position: absolute;
left: 50%;
margin-left: -400px;
text-align: center;
line-height: 100px;
}
.container .box,
.box2 {
width: 300px;
height: 300px;
background: red;
border-radius: 50%;
margin: auto;
margin-top: 50px;
text-align: center;
line-height: 300px;
}
.box2 {
background: deepskyblue;
}
#show {
font-size: 30px;
color: white;
font-weight: bold;
}
#start {
width: 300px;
height: 50px;
background: palevioletred;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box">
<span id="show">
奖品
</span>
</div>
<button id="start" οnclick="start()">开始抽奖</button>
</div>
<script type="text/javascript">
var flag = false;
var goods = ["香蕉", "橘子", "八宝粥", "宝马五元代金券", "电脑",
"iPhoneX", "1QB", "黄钻"
];
var shoe = document.getElementById("show");
var _start = document.getElementById("start");
var _box = document.getElementById("box");
var timer;
function start() {
if (!flag) {
flag = true;
_start.innerHTML = "停止抽奖";
timer = setInterval(function() {
var index = Math.floor(Math.random() * goods.length);
var good = goods[index]
show.innerText = good;
_box.className = "box2";
}, 10)
} else {
flag = false;
_start.innerHTML = "开始抽奖";
clearInterval(timer);
_box.setAttribute("class", "box");
}
}
</script>
</body>
</html>
全选和反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li {
height: 30px;
}
</style>
<script type="text/javascript">
function change(node) {
var all_check = document.getElementsByClassName("all_check");
for (var i = 0; i < all_check.length; i++) {
if (node.checked == true) {
all_check[i].checked = true;
} else {
all_check[i].checked = false;
}
}
}
var checkedNum = 0;
function eachLi(node) {
if (node.checked == true) {
checkedNum++;
} else {
checkedNum--;
}
var all_check1 = document.getElementsByClassName("all_check");
var allNum = all_check1.length;
var all = document.getElementById("all");
if(checkedNum == allNum) {
all.checked = true;
} else {
all.checked = false;
}
}
</script>
</head>
<body>
<input type="checkbox" οnclick="change(this)" id="all"/>全选
<ul>
<h3>您的爱好是：</h3>
<li><input type="checkbox" οnclick="eachLi(this)" class="all_check">看书</li>
<li><input type="checkbox" οnclick="eachLi(this)" class="all_check">看电影</li>
<li><input type="checkbox" οnclick="eachLi(this)" class="all_check">玩QQ</li>
<li><input type="checkbox" οnclick="eachLi(this)" class="all_check">玩微信</li>
<li><input type="checkbox" οnclick="eachLi(this)" class="all_check">敲代码</li>
</ul>
</body>
</html>
41
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
