HTML+JavaScript案例

最新推荐文章于 2023-04-16 23:01:23 发布
最新推荐文章于 2023-04-16 23:01:23 发布
阅读量663 收藏 4
点赞数
分类专栏： 前端基础 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59138290/article/details/129156157
版权

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>
m0_59138290
关注
专栏目录
30个HTML+JS小案例
05-06
该项目都是我工作时期，闲来无事做来玩的小案例。如果你是0基础的小白或者H5，Css3基础不太好的开发者，相信当你跟着敲完之后你能得到巨大的收获。能加固你的H5和css3的基础。 里面可能会有一些奇奇怪怪的注释代码，如果看到了，请忽略它！！！！ 内含：canvas，H5+css3网页还原，JS DOM BOM操作小案例，css动画，验证码，抽奖系统，轮播图等等
html+css+js实例
12-18
用html+css+js做的一个简单小网页，可以作为初学者的参考资料。
网页设计作业-综合案例
12-23
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=<device-width>, initial-scale=1.0">     <title>Document</title> </head> <body>     <h4爱</h4>     <table width="500">         <!-- 第一行 -->         <tr>             <td>性别：</td>             <td>                 <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg"> 男</label>                
html js实例
11-12
html js实例
HTML+JS 小小案例
Bradley的博客
07-25 1269
HTML+CSS+JS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="js插件/swiper.min.css"/> <style> *{ margin: 0; padding: 0; }
html+javascript
qq_37142038的博客
02-18 176
前端html+javascript
HTML和JavaScript
weixin_52213223的博客
04-16 1664
JavaScript 是一个事件驱动(Event-driven)的语言，当浏览器载入网页开始读取后，虽然马上会读取JavaScript 事件相关的代码，但是必须要等到「事件」被触发(如使用者点击、按下键盘等)后，才会再进行对应代码段的执行。事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。事件：特定的时间节点发生的一些动作（行为），一旦动作发生或会触发一些操作。
《html+css+javascript 网页制作案例教程》源代码
最新发布
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
HTML+CSS+JavaScript网页制作案例教程（第2版）-教学大纲.zip
07-06
《HTML+CSS+JavaScript网页制作案例教程（第2版）》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术，通过理论讲解和实际案例，使学习者掌握网页开发的基本流程...
html和javaScript资料和例子
11-20
html和javaScript资料和小例子
祝福墙效果（html+Javascript）
10-25
1.采用div+css布局样式，界面非常漂亮 2.JavaScript技术 3.HTML
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
HTML+Javascript+CSS测试题
06-08
HTML、JavaScript和CSS是网页开发的三大核心技术，它们各自承担着不同的职责，共同构建了丰富的交互式和动态的网络体验。 HTML（HyperText Markup Language）是网页内容的基础结构语言，用于定义网页的元素和布局。...
HTML+CSS+JavaScript原生购物网站首页案例
04-14
在构建一个基于HTML+CSS+JavaScript的原生购物网站首页案例时，我们需要理解这三个技术的核心概念以及它们如何协同工作来创建动态、交互式的网页。以下是一些相关知识点的详细说明： 1. **HTML（HyperText Markup ...
web前端基础入门教程（非常详细）HTML+CSS+JavaScript
f5465245的博客
10-29 2166
每一个学习前端的人对于前端三剑客《html+css+JavaScript》都不会陌生，可以说这是前端的世界，就没有前端解决不了的，而在前端的世界里就没有javascript实现不了的。 关于JavaScript有一句话：凡是可以用javascript来写的应用，最终都会用javascript，javascript可运行在所有的主要平台上，也可以运行在每一个主流操作的服务器上。现如今我们在网站写任何一个主要功能的时候都需要有懂够用JavaScript写前端的开发人员。 下面我们就来了解下这三门技术都有什么
HTML+JS好例子集锦
热门推荐
cnds123的专栏
02-28 1万+
HTML+JS好例子集锦 一些HTML+JavaScript好例子，有些例子照网络资料，包括HTML+JS限时小学数学出题、打开对话框选择本地文件、简单画布画板、俄罗斯方块游戏、落英纷飞动画、随机点名器的示例 、生成二维码等。...
HTML 脚本 (Script) 实例
Zyyss1993的博客
11-15 525
1.JavaScript 使 HTML 页面具有更强的动态和交互性。HTML script 元素<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。下面的脚本会向浏览器...
html+css+javascript网页制作案例教程
06-28
三、JavaScript案例教程 JavaScript是用于网页交互的技术，它可以帮助我们实现网页上的交互效果和动态效果。在学习JavaScript时，我们可以通过案例教程来学习如何使用JavaScript来实现这些效果。 例如，我们可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_59138290

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值