如何用python做前端展示

转载

mob64ca13fe1aa6 2024-09-16 12:13:21

文章标签 如何用python做前端展示前端学习 javascript html 文章分类 Python 后端开发

01-各种弹框的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="alert('删除成功!')">弹框1</button>
		<br><br>
		<span id="s1">要删除的数据</span>
		<button onclick="confirmAction()">删除</button>
		
		<br><br>
		<button onclick="promptAction()">添加</button>
		
	</body>
</html>

<script>
	// 1.alter  -  有一段文字和确定的按钮的弹框
	// 2.confirm  - 有一段文字提示信息、确定按钮和取消按钮的弹框(如果用户点击的是取消按钮，返回值是false；如果用户点击的是确定按钮，返回值是true)
	function confirmAction(){
		var result = confirm('是否真的要删除这个数据?')
		// console.log(result)
		if(result==true){
			document.getElementById('s1').remove()
		}
	} 
	// 3.prompt  - 带有文字提示信息、确定按钮、取消按钮和输入框的弹框（如果点击取消按钮返回值是null，点击确定按钮返回值是输入框中的内容）
	function promptAction(){
		var result = prompt('请输入添加的学生的名字:', '小明')
		console.log(result)
		if(result != null && result.length != 0){
			var p = document.createElement('p')
			p.innerText = result
			var body = document.getElementsByTagName('body')[0]
			body.appendChild(p)
		}
	}
	
</script>

02-缩略图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box2>img{
				width: 60px;
				height: 60px;
			}
		</style>
	</head>
	<body>
		<!-- 方法1：直接在html中创建对应的固定的标签 -->
		<!-- <div>
			<img id="bigImage" src="img/picture-1.jpg" alt="">
		</div>
		<div>
			<img src="img/thumb-1.jpg" οnmοuseοver="document.getElementById('bigImage').src='img/picture-1.jpg'">
			<img src="img/thumb-2.jpg" οnmοuseοver="document.getElementById('bigImage').src='img/picture-2.jpg'">
			<img src="img/thumb-3.jpg" οnmοuseοver="document.getElementById('bigImage').src='img/picture-3.jpg'">
		</div> -->
		
		<!-- 方法2：用js代码创建对应的标签-->
		<div id="box1">
			<img id="bigImg" style="width:400px;height: 300px;">
		</div>
		<div id="box2"></div>
	</body>
</html>

<script>
	// ----------------方法2对应的js代码-------------
	// 1.准备数据
	var data = {
		'k1': ['https://img2.baidu.com/it/u=2336839758,781844272&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=420', 'https://img2.baidu.com/it/u=2336839758,781844272&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=420'],
		'k2': ['img/thumb-2.jpg', 'img/picture-2.jpg'],
		'k3': ['img/thumb-3.jpg', 'img/picture-3.jpg'],
		'k4': ['img/weixin.png', 'img/slide-1.jpg'],
		'k5': ['img/thumb-3.jpg', 'img/picture-3.jpg']
	}
	
	// 2.创建小图
	for(x in data){
		var sImg = document.createElement('img')
		sImg.src = data[x][0]
		sImg.key = x
		document.getElementById('box2').appendChild(sImg)
		
		if(x == 'k1'){
			document.getElementById('bigImg').src = data['k1'][1]
		}
		
		// 给每个小图绑定事件
		sImg.onmouseover = function(){
			document.getElementById('bigImg').src = data[this.key][1]
		}
	}
	
	// ['张三', 18, '15399923045', 57, 167, 78]
	
	// stu = {
	// 	'name': '张三',
	// 	'age': 18,
	// 	'tel': '15399923045',
	// 	'weight': 57,
	// 	'height': 167,
	// 	'score': 78
	// }
	
	// console.log(stu['tel'])
</script>

03-轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 940px;
				height: 430px;
				margin-left: auto;
				margin-right: auto;
				
				position: relative;
			}
			
			#imgBox{
				width: 100%;
				height: 100%;
			}
			
			#pointBox{
				position: absolute;
				bottom: 20px;
				
				width: 100%;
				text-align: center;
			}
			
			#pointBox>span{
				color: rgb(220, 210, 210);
				margin-left: 5px;
				margin-right: 5px;
				
				/* 让鼠标变成手指 */
				cursor: pointer;
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			<a href="" id="a1" target="_blank">
				<img id="imgBox" src="img/slide-1.jpg" alt="">
			</a>
			
			<div id="pointBox"></div>
		</div>
	</body>
</html>

<script>
	// 1.准备数据
	var imgUrls = [
		['img/slide-1.jpg', 'https://www.baidu.com'],
		['img/slide-2.jpg', 'https://www.taobao.com'],
		['img/slide-3.jpg', 'https://www.jd.com'],
		['img/slide-4.jpg', 'https://www.51job.com'],
		['https://img2.baidu.com/it/u=1246423168,2248525401&fm=253&fmt=auto&app=138&f=JPEG?w=969&h=500','https://www.baidu.com'],
		['https://img2.baidu.com/it/u=5239947,3885195473&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=375', 'https://cn.vuejs.org/guide/introduction.html#what-is-vue']
		
	]
	currentIndex = 0	      //	当前显示的图片在列表中的下标
	var count = imgUrls.length
	
	// 2.根据数据创建标签显示数据
	// 显示第一张图片
	document.getElementById('imgBox').src = imgUrls[0][0]
	document.getElementById('a1').href = imgUrls[0][1]
	
	// 创建所有图片对应点
	for(x in imgUrls){
		var span = document.createElement('span')
		span.innerText = '●'
		span.index = parseInt(x)			// 让点和下标关联
		document.getElementById('pointBox').appendChild(span)
		
		if(x == 0){
			span.style.color = '#aaaaaa'
		}
		
		// 给每一个点对应的标签绑定鼠标悬停事件
		span.onmouseover = function(){
			// 关闭定时器
			clearInterval(t1)
			
			// 手动控制切换图片
			if(this.index != currentIndex){
				// 在切换之前获取currentIndex对应的点，修改状态为未选中状态
				var allPoint = document.getElementById('pointBox').children
				allPoint[currentIndex].style.color = 'rgb(220, 210, 210)'
				
				// 将当前选中的点设置为选中状态
				this.style.color = '#aaaaaa'
				
				// 获取当前点对应的下标，找到对应的图片
				currentIndex = this.index
				document.getElementById('imgBox').src = imgUrls[currentIndex][0]
				document.getElementById('a1').href = imgUrls[currentIndex][1]
			}
			
		}
		
		// 给每个点绑定鼠标离开事件
		span.onmouseout = function(){
			startMove()
		}
	}
	
	// 3.定时器自动切换图片
	function startMove(){
		t1 = setInterval(function(){
			// 在让下标加1之前获取下标对应的点，修改点的样式
			var allPoint = document.getElementById('pointBox').children
			allPoint[currentIndex].style.color = 'rgb(220, 210, 210)'
			
			// 控制下标变化，来获取下一张图片信息
			currentIndex += 1
			if(currentIndex == count){
				currentIndex = 0
			}
			// ‘abc’ + 1  ->  abc1
			// 根据新的下标获取新的数据
			console.log('=====:', currentIndex)
			document.getElementById('imgBox').src = imgUrls[currentIndex][0]
			document.getElementById('a1').href = imgUrls[currentIndex][1]
			
			// 修改点的状态
			allPoint[currentIndex].style.color = '#aaaaaa'
			
		},2000)
	}
	startMove()

	
</script>

04-按钮切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#btn-box{
				margin-top: 15px;
				margin-left: 15px;
			}
			#btn-box>button{
				width: 150px;
				height: 70px;
				border: none;
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<div id="btn-box">
			<button style="color: red;">扫码登录</button>
			<button>账号登录</button>
			<button>QQ登录</button>
			<button>微信登录</button>
		</div>
		<div></div>
	</body>
</html>
<script>
	var allBtn = document.getElementById('btn-box').children
	currentindex = 0
	for (var index=0;index<allBtn.length;index++) {
		var btn = allBtn[index]
		btn.index = index
		
		btn.onclick = function(){
			// 将当前选中的标签变成红色
			this.style.color = 'red'
		
			// 将之前选中的标签拿到，设置颜色为黑色
			allBtn[currentindex].style.color = 'black'
			
			// 更新当前下标为当前选中的按钮对应的下标
			currentindex = this.index
		}
	}
</script>

05-下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="" id="city">
			
		</select>
		
		<select name="" id="">
			
		</select>
	</body>
</html>
	
<script>
		// 1.准备数据
		var allCity = {
			'四川省': ['成都','德阳','乐山','达州','绵阳'],
			'广东省': ['广州','深圳','佛山','珠海','汕头','龙岗'],
			'陕西省': ['西安','咸阳','宝鸡','榆林','延安','铜川']
		}
		
		// 创建省份对应的选项
		
		for(var key in allCity){
			var p = document.createElement('option')
			p.innerText = key
			p.value =key
			
			document.getElementById('city').appendChild(p)
			
		}
		
</script>

06-城市下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="" id="province" onchange="changeProvince()"></select>
		
		<select name="" id="city"></select>
	</body>
</html>
<script>
	// 1. 准备数据
	var allCity = {
		'四川省': ['成都', '德阳', '泸州', '乐山', '达州', '绵阳'],
		'广东省': ['广州', '深圳', '佛山', '珠海', '汕头'],
		'辽宁省': ['沈阳', '大连', '盘锦', '铁岭']
	}
	
	// 创建省份对应的选项
	for(var key in allCity){
		var p = document.createElement('option')
		p.innerText = key
		p.value = key
		
		document.getElementById('province').appendChild(p)	
	}
	
	// 创建第一个省对应所有的市对应的选项
	var citys = allCity['四川省']
	for(var index in citys){
		var city = citys[index]
		
		var c = document.createElement('option')
		c.innerText = city
		c.value = city
		
		document.getElementById('city').appendChild(c)
	}
	
	// 下拉列表修改选中的省份
	function changeProvince(){
		var currentProvince = document.getElementById('province').value

		// 获取当前选中的省份对应的城市
		var currentCitys = allCity[currentProvince]
		
		// 先清空原来选中的省对应的城市
		var cityBox = document.getElementById('city')
		cityBox.innerText = ''
		
		// 将当前选中省对应的所有城市添加到第二个下拉列表中
		for(var index in currentCitys){
			var city = currentCitys[index]
			
			var c = document.createElement('option')
			c.innerText = city
			c.value = city
			
			cityBox.appendChild(c)
		}	
	}
	
	
</script>

07-jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 导入jQuery -->
		<script src="js/jquery.min.js"></script>
		
	</head>
	<body>
		<div id="box1">
			<p class="c1">我是段落1</p>
			<a>我是超链接1</a>
			<span class="c1">我是span1</span>
			<p id="p1">我是段落2</p>
			<p>我是段落3</p>
		</div>
		
		<div id="box2">
			<span>我是span2</span>
			<a class="c1">我是超链接2</a>
			
			<input type="text" name="username" id="">
			<input type="radio" name="gender">男
			<input type="radio" name="gender">女
			
		</div>
		
		
		<div id="box3">
			<button>点击1</button>
			<button>点击2</button>
			<button>点击3</button>
			<button>点击4</button>
			<button>点击5</button>
		</div>
		
		<button onclick="addAction()">添加</button>
		
	</body>
</html>

<script>
	// jQuery相比原生js，标签操作更简单
	result =  $('#p1')
	console.log(result)
	
	result = $('#box2>span')
	console.log(result)
	
	// jQuery代码
	a = $('<a href="https://www.baidu.com" style="color: red;">百度</a>')
	$('#box2').append(a)
	
	$('#box3').on('click', 'button', function(){
		alert('点击了'+this.innerText)
	})
	
	function addAction(){
		var result = prompt('添加一个新的按钮：', '点击N')
		if(result != null){
			$('#box3').append($(`<button>${result}</button>`))
		}
	}
	
	// js代码
	a = document.createElement('a')
	a.innerText = '百度'
	a.href = 'https://www.baidu.com'
	a.style.color = 'red'
	document.getElementById('box2').appendChild(a)
	
	
</script>

08-Vue的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	</head>
	<body>
		
		<div id="app1">
			<p>{{message}}</p>
		</div>
		
		<!-- Vue在控制网页内容的时候不需要获取标签。控制原理：让数据和标签绑定，绑定成功之后，修改数据就可以修改标签 -->
		<script>
			var app = new Vue({
				el:'#app1',
				data: {
					message: 'hello world!'
				}
				
			})
			
			app.message = '你好世界!'
		</script>
		
		
		
	</body>
	
	
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。