HTML累加计数及界面简单绘制

想要学习的胖子

已于 2022-11-02 20:19:48 修改

阅读量1k

点赞数

分类专栏： HTML 文章标签：前端 bootstrap javascript

于 2022-11-02 20:18:32 首次发布

本文链接：https://blog.csdn.net/qq_43720916/article/details/127658014

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用html加js实现累加计数

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" href="../../assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
		<script src="../../assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
		<script src="../../assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<title>Title</title>
	</head>
	<body>
		<div id="num"></div>
		<button onclick="fun()">累加计数</button>

		<script>
			document.getElementById("num").innerText=0;
            function fun(){
                var num=document.getElementById("num").innerHTML;
                document.getElementById("num").innerText=parseInt(num)+1;
			}
		</script>
	</body>

</html>

innerText JS中对网页中的属性赋值
innerHTML JS中取网页中的属性

HTML简单绘制

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" href="../../assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
		<script src="../../assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
		<script src="../../assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-push-2" style="text-align: right;margin: 10px">
					<div class="row">
						<div class="col-md-3">
							<label style="line-height: 40px">
								用户名
							</label>
						</div>
						<div class="col-md-7">
							<label>
								<input type="text" class="form-control col-md-push-1">
							</label>
						</div>
					</div>

					<div class="row">
						<div class="col-md-3">
							<label style="line-height: 40px">
								密码
							</label>
						</div>
						<div class="col-md-7">
							<label>
								<input type="password" class="form-control col-md-push-1">
							</label>
						</div>
					</div>

					<div class="row">
						<div class="col-md-3">
							<label style="line-height: 30px">
								性别
							</label>
						</div>
						<div class="col-md-7 col-md-push-1" style="text-align: left;">
							<label class="radio-inline">
								<input type="radio" name="sex">男
							</label>
							<label class="radio-inline">
								<input type="radio" name="sex">女
							</label>
						</div>
					</div>

					<div class="row">
						<div class="col-md-3">
							<label style="line-height: 30px">
								兴趣爱好
							</label>
						</div>
						<div class="col-md-7 col-md-push-1" style="text-align: left">
							<label class="checkbox-inline">
								<input type="checkbox" name="sex">琴
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" name="sex">棋
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" name="sex">书
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" name="sex">画
							</label>
						</div>
					</div>

					<div class="row">
						<div class="col-md-3">
							<label style="line-height: 40px">
								所在地
							</label>
						</div>
						<div class="col-md-7 col-md-push-1" style="text-align: left">
							<select class="form-control">
								<option>湖北</option>
								<option>北京</option>
								<option>上海</option>
								<option>南京</option>
							</select>
						</div>
					</div>

					<div class="row" style="text-align: center">
						<button class="btn btn-danger">保存</button>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="row">
					<div class="col-md-10 col-md-push-1" style="text-align: center;margin: 10px;">
						<div class="col-md-2">
							<label style="line-height: 40px">
								用户名
							</label>
						</div>
						<div class="col-md-4">
							<label>
								<input type="text" class="form-control col-md-push-1">
							</label>
						</div>
						<div class="col-md-2">
							<label style="line-height: 40px">
								密码
							</label>
						</div>
						<div class="col-md-4">
							<label>
								<input type="password" class="form-control col-md-push-1">
							</label>
						</div>
					</div>
				</div>
			</div>

		</div>
	</body>
</html>

在这里插入图片描述
使用div和bootStrap进行简单的绘制
使用bootStrap分行操作,前6行在一个div下,最后一行单独,原因是左右间距保证大小.
写完后考虑可以使用bootStrap分两行操作,第一行增加6行两列的表格,最后一行单独,这样实现可以简化代码量,只需设置一行的文字高度,且不用考虑吧第三行,第四行与其他的高度不一致的问题