Demo小例子

最新推荐文章于 2024-02-21 17:07:33 发布

静寒

最新推荐文章于 2024-02-21 17:07:33 发布

阅读量797

点赞数 2

分类专栏： html 文章标签： html例子

本文链接：https://blog.csdn.net/weixin_43906784/article/details/84722060

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

标题1.微信登录系统

这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>微信登录系统</title>
		<script type="text/javascript">
			function denglu(){
				var a = document.getElementById("in01").value;
				var b = document.getElementById("in02").value;
				if(a=="123" && b=="123"){
					alert("登录成功");
				}else {
					alert("输入错误");
				}	
			}
		</script>
	</head>
	<body>
		<h1>微信登录系统</h1>
		账号：<input type="text" id="in01" name="in">
		<br />
		密码：<input type="text" id="in02" name="in">
		<br />
		<input type="button" value="登录" onclick="denglu()">
		<input type="button" value="注册">
	</body>
</html>

标题2.表单控制

当输入是，yes或者shi时提示回答正确，否则提示回答错误。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单控制</title>
	</head>
	<script type="text/javascript">
		function tijiao(){
			var a = document.getElementById("in01").value;
			if(a=="shi"||a=="yes"||a=="是"){
				document.getElementById("span1").innerHTML="回答正确";
				document.body.style.color="green";
			}else{
				document.getElementById("span1").innerHTML="回答错误";
				document.body.style.color="red";
			}
		}
	</script>
	<body>
		<span>南海是不是中国的</span>
		<input type="text" id="in01" name="in" />
		<input type="button" value="提交" onclick="tijiao()"/>
		<span id="span1"></span>
	</body>
</html>

标题3.变换颜色。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景颜色</title>
	</head>
	<script type="text/javascript">
		function bian(color){
			var a=document.getElementsByTagName("body")[0];
			a.bgColor=color;
		}
	</script>
	<body>
		<input type="radio" onclick="bian('red')" name="t" value="red"/>红
		<input type="radio" onclick="bian('yellow')" name="t" value="yellow"/>黄
		<input type="radio" onclick="bian('blue')" name="t" value="blue"/>蓝
	</body>
</html>

标题4.时间控件

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时间控件</title>
	</head>
	<script type="text/javascript">
		var t = null;
		t=setTimeout(time,1000);
		function time(){
			clearTimeout(t);
			dt=new Date();
			var h=dt.getHours();
			var m=dt.getMinutes();
			var s=dt.getSeconds();
			document.getElementById("timeShow").innerHTML="现在的时间为："
			+h+"时"+m+"分"+s+"秒";
			t=setTimeout(time,1000);
		}
	</script>
	<body>
		<label id="timeShow"></label>
	</body>
</html>

标题5.摇奖

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		var e;
		function start(){
			e=setInterval("get()",1);
		}
		function get(){
			document.getElementById("n1").value=parseInt(Math.random()*10);
			document.getElementById("n2").value=parseInt(Math.random()*10);
			document.getElementById("n3").value=parseInt(Math.random()*10);
			document.getElementById("n4").value=parseInt(Math.random()*10);
			document.getElementById("n5").value=parseInt(Math.random()*10);
		}
		function stop(){
			clearInterval(e);
		}
	</script>
	<body>
		<input type="text" id="n1" size="1"/>
		<input type="text" id="n2" size="1"/>
		<input type="text" id="n3" size="1"/>
		<input type="text" id="n4" size="1"/>
		<input type="text" id="n5" size="1"/>
		<input type="button" value="start" onclick="start()" />
		<input type="button" value="stop" onclick="stop()" />
	</body>
</html>

标题6.bootstarp调用样式

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input{
				width: 200px;
			}
			.btnx{
				width: 120px;
			}
			select{
				width: 200px;
				height: 30px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<div class="container">
			<table class="table table-bordered table-striped">
				<form>
					<tr>
						<td>姓名</td>
						<td>
							<input type="text" required="required" />
						</td>
					</tr>
					<tr>
						<td>年龄</td>
						<td>
							<input type="number" min="18" max="100" required />
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="submit" value="提交" class="btnx" />
							<input type="reset" value="重置" class="btnx" />
						</td>
					</tr>
				</form>
			</table>
		</div>
	</body>
</html>

标题7.无缝滚动框

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0px;padding:0px;}
	        #main{
	            border:1px solid #ccc;
	            height:220px;
	            width:400px;
	            overflow: hidden;
	            margin:50px auto;
	            padding-left:50px;
	        }
		</style>
	</head>
	<script type="text/javascript">
		window.onload = function(){
			var omain = document.getElementById("main");
			var obox1 = document.getElementById("box1");
			var obox2 = document.getElementById("box2");
			obox2.innerHTML = obox1.innerHTML;
			var time = null;
			function move(){
				time = setInterval(function (){
					if(omain.scrollTop >= obox2.offsetTop){
							console.log(omain.scrollTop)
	                        omain.scrollTop  =  omain.scrollTop - obox1.offsetHeight;
	                	}  
					omain.scrollTop++; 
				},30);
			}
			move();
			omain.onmousemove = function(){
                if(time != null)clearInterval(time);
            }
            omain.onmouseout =  function (){
                move();
            }
		}
	</script>
	<body>
		<div id="main">
			<div id="box1">
				<ol>
	                <li>视觉的魅力</li>
	                <li>人才举荐奖励办法</li>
	                <li>国内差旅费的报销费规定</li>
	                <li>公司报销费规定</li>
	                <li>公司员工国内差旅费的报销费规定</li>
	                <li>2014版公司规章制度</li>
	                <li>公司员工移动通讯费的报销</li>
	                <li>公司员工名单</li>
	                <li>员工管理规定</li>
	                <li>公司员工移动通讯费</li>
	                <li>公司员工国内差旅费的报销费规定</li>
	                <li>2014版公司规章制度</li>
	                <li>公司员工移动通讯费的报销</li>
	                <li>公司员工移动的报销</li>
	                <li>公司员工移动通讯费</li>
	                <li>公司员工移动通讯费</li>
            	</ol>
			</div>
			<div id="box2"></div>
		</div>
	</body>
</html>