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>

HTML+JavaScript案例相关推荐

javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
JavaScript案例之电影院电子选票
JavaScript案例之电影院电子选票源码: <!doctype html> <html lang="en"> <head><meta ...
JavaScript案例之抽奖机
JavaScript案例之抽奖机源码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
JavaScript案例之使用验证码进行简单判断
JavaScript案例之使用验证码进行简单判断源代码: <!DOCTYPE html> <html><head><meta charset="u ...
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
JavaScript案例之跑马灯左右无缝连接效果图: 思路: 1.先做界面 1.1 制作一个大盒子,进行存放整个图片及按钮区域 1.2 制作两个按钮和中间区域盒子 1.3 中间区域盒子中使用无序列表 ...
javascript案例练习
案例1.动态显示时间 <div id="div_1"></div> <script type="text/javascript"& ...
JavaScript 案例综合提升
目录一.购物项目部分功能实现 1.CSS样式布局: 2.HTML代码: 二.其它案例一.购物项目部分功能实现 1.CSS样式布局: @charset "gb2312"; /* ...
javaScript案例——二级联动、三级联动、省市区三级联动
二级联动: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...

HTML+JavaScript案例

HTML：

用户注册：

电子汇款单

李白诗词

豆瓣电影

JavaScript案例

抽奖案例

全选和反选

HTML+JavaScript案例相关推荐

最新文章

热门文章