20个JavaScript开发案列（一）

最新推荐文章于 2023-12-02 22:06:52 发布

无所畏惧的man

最新推荐文章于 2023-12-02 22:06:52 发布

阅读量4.7k

点赞数 5

分类专栏：毕业设计文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/pipihan21/article/details/129085051

版权

毕业设计专栏收录该内容

13 篇文章 26 订阅

订阅专栏

20个JavaScript开发案列（一）

二十个JavaScript实例，每天五个，四天更完，敬请期待！期间还会出JavaScript的复习回顾，学完这些开始搞毕设前端，也会更新到此专栏！

o(￣▽￣)ブ φ(゜▽゜*)♪ (p≧w≦q)

支付十秒倒计时

代码实现

demo1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付十秒倒计时</title>
		<style type="text/css">
			body,h3{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 500px;
				margin: 50px auto 0;
				background-color: #ddd;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h3>订单确认</h3>
			<p>商品：Web前端课程</p>
			<p>原价:1980元</p>
			<p>内容：HTML、CSS、JS</p>
			<p>地址：辽宁省大连市</p>
			<p>
				<button>取消</button>
				<button>支付</button>
			</p>
		</div>
	</body>
	<script type="text/javascript">
		'user strict';
		document.getElementsByTagName('button')[1].onclick=function(){
			let res=window.confirm('您确定要支付吗');
			if(res){
				location.href='./demo2.html';
			}
		}
	</script>
</html>

demo2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付成功</title>
		<style type="text/css">
			body,
			h2 {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #ddd;
			}
			.box{
				background-color: rgba(0, 0, 0, 0.5);
				width: 500px;
				margin: 200px auto 0;
				text-align: center;
			}

			#jump {
				font-size: 50px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h2>恭喜您，支付成功</h2>
			<span id="jump">10</span>秒后自动返回首页
			<p><button>立即返回</button></p>
		</div>
		<script type="text/javascript">
			//逻辑：加载页面触发定时器，10s
			window.onload=function(){
				let time=10;
				setInterval(()=>{
					time--;
					document.getElementById('jump').innerText=time;
					if(time==0){// 计时结束发生跳转
						location.href='https://blog.csdn.net/pipihan21';
					}
				},1000)//间隔为1s
			}
			document.getElementsByTagName('button')[0].onclick=function(){
				location.href='https://blog.csdn.net/pipihan21';
			}
		</script>
	</body>
</html>

效果

验证码生成及校验

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证码生成及校验</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
				color: #fff;
			}
			.Box{
				margin: 100px auto 0;
				text-align: center;
			}
			.box {
				width: 300px;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.5);
				margin: auto;
				text-align: center;
			}

			.boxCode {
				width: 300px;
				background-color: rgba(0, 0, 0, 0.5);
				margin: auto;
			}

			.code {
				color: red;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="Box">
			<div class="boxCode">
				<span class="code" id="code"></span>
				<a href="" id="linkbt">看不清换一张</a>
			</div>
			<div class="box">
				<label for="inputCode">验证码：</label>
				<input type="text" id="inputCode">
				<input type="button" id="Button1" value="确定">
			</div>
		</div>
		<script type="text/javascript">
			'user strict';
			function getCode(){
				var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
				var str = '';
				for (let i = 0; i < 6; ++i) {
					//取0到15
					let num = Math.round(Math.random() * (15 - 0) + 0);//得到0-15的一个随机数
					str += arr[num];//拼接字符串
				}
				return str;
			}
			window.onload=function(){
				let res=getCode();
				document.getElementById("code").innerText=res;
				document.getElementById("linkbt").onclick=function(){
					document.getElementById("code").innerText=res;
				}
				document.getElementById('Button1').onclick=function(){
					let code=document.getElementById('code').innerText;
					let inputCode=document.getElementById('inputCode').value;
					//console.log(code);
					//console.log(inputCode);
					if(code!=inputCode){
						alert('输入错误！');
						document.getElementById('inputCode').value='';
						return false;
					}else{
						location.href='https://blog.csdn.net/pipihan21';
					}
				}
			}
		</script>
	</body>
</html>

效果

百度搜索数据

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度搜索数据</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 300px;
				margin: 200px auto 0;
			}

			#input-txt {
				height: 30px;
				width: 200px;
				border: 1px solid #ddd;
				outline-color: aqua;
			}

			#search {
				/* color: white; */
				/* background-color: black; */
				margin-left: 10px;
				border-radius: 5px;
				border: none;
				height: 30px;
				width: 50px;
			}

			.show {
				width: 202px;
				height: 300px;
				color: #000;
				border: 1px solid #ddd;
				display: none;
				padding: 3px;
			}
			.box .show p{
				color: red;
				font-size: 13px;
				text-align: left;
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<input type="text" id="input-txt" placeholder="请输入搜索数据">
			<button id="search" type="submit">搜索</button>
			<div class="show" id="show">
				<p>哈哈哈</p>
			</div>
		</div>
		<script>
			'user strict';
			let arr = ['中国居民存款破纪录', '致敬！灾难中的中国逆行者', '社保缴费满15年就可以不缴了吗？', '科学家研发出男性避孕药', '高启强为什么解领带擦玻璃', '吴刚说最想演的角色是高启强','我是大帅哥'];
			//先完成展示区域的显示或隐藏
			let input = document.getElementById('input-txt');
			let show = document.getElementById('show');
			input.onkeyup = function() {
				show.style.display = 'block';
				//匹配数据
				let str = '';
				arr.forEach((item) => {
					//匹配有指定数据的字符串
					let res = item.indexOf(input.value);
					if (res != -1) {
						str += '<p>' + item + '</p>';
					}
				})
				// console.log(str);
				if(!input.value||!str){
					show.innerHTML='<p>暂无结果！</p>';
				}else{
					show.innerHTML = str; //将代码块嵌入到html中显示
				}
			}
			input.onblur = function() {
				show.style.display = 'none';
				input.value = '';
			}
		</script>
	</body>
</html>

效果

tab选项卡功能

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab选项卡功能</title>
		<style type="text/css">
			body,
			ul {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
				display: flex;
			}

			ul li {
				width: 50px;
				margin-left: 20px;
				text-align: center;
				border: 5px solid #ddd;
				cursor: default;
				background-color: rgba(0, 0, 0, 0.5);
			}

			img {
				width: 200px;
				height: 200px;
				display: none;
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>猫</li>
			<li>狗</li>
			<li>老虎</li>
			<li>狮子</li>
		</ul>
		<div>
			<img src="img/cat.webp" alt="" style="display: block;">
			<img src="img/dog.webp" alt="">
			<img src="img/tigger.webp" alt="">
			<img src="img/lion.webp" alt="">
		</div>
		<script type="text/javascript">
            'user strict';
			let li = document.getElementsByTagName('li');
			let img = document.getElementsByTagName('img');

			for (let i = 0; i < li.length; ++i) {
				// 先进行元素数组下标设置
				li[i].index = i;
				//鼠标移入背景变色
				li[i].onmouseover = function() {
					li[i].style.backgroundColor = 'yellow';
					console.log(this.index); 
					for(let j=0;j<img.length;++j){
						img[j].style.display='none';
					}
					img[this.index].style.display='block';
					
				}
				//鼠标移出背景色还原
				li[i].onmouseout = function() {
					li[i].style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
				}
			}
		</script>
	</body>
</html>

效果

勾选框选择效果

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>勾选框选择效果</title>
	</head>
	<body>
		<form action="">
			<p><input type="checkbox" name="" id="">郭子晗</p>
			<p><input type="checkbox" name="" id="">赵四</p>
			<p><input type="checkbox" name="" id="">小沈阳</p>
			<p><input type="checkbox" name="" id="">宋小宝</p>
		</form>
		<button onclick="getAll(0)">全选</button>
		<button onclick="getAll(1)">全不选</button>
		<button onclick="getAll(2)">反选</button>
		<script>
            'user strict';
			let but = document.getElementsByTagName('button');
			let input = document.getElementsByTagName('input');
			//封装函数
			function getAll(num){
				for (let i = 0; i < input.length; ++i) {
					if(num===0){//全选
						input[i].checked = true;
					}
					else if(num===1){//全不选
						input[i].checked = false;
					}
					else{//反选
						input[i].checked = !input[i].checked;
					}
				}
			}
		</script>
	</body>
</html>