Web前端实战:管理系统网页的初步设计

登录页面设计

在这里插入图片描述


页面为登录页面,实现了登录信息正确成功跳转,登录信息错误提示窗口的弹出;点击注册和忘了密码跳转到新的页面。

管理页面设计

在这里插入图片描述


页面为管理页面,背景设计为自动播放视频,并且点击页面会播放视频声音;同时通过JavaScript的事件实现对表格的修改、删除、添加。页面只是综合利用到前端HTML、CSS、JavaScript的语言实行对页面的设计。

其中,代码如下:
DaoHTML.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>SMT</title>
  <link rel="stylesheet" type="text/css" href="D:/Program Files/EditPlus 3/Tim/DaoCSS.css">
  <script charset="GB2312" src="D:/Program Files/EditPlus 3/Tim/DaoJS.js"></script>
 </head>
 
 <body>
 	
	<video id="video" style="width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;" autoplay loop muted> <!--自动播放、循环、静音(JS设置点击开启)-->
		<source src="D:/Program Files/EditPlus 3/Tim/img/123.mp4" type="video/mp4">
	</video>

	<div id="div_contain">
			<div id="div_StuDao"> 				
				<table id="StuTB">
					<tr>
						<th>学号</th>
						<th>姓名</th>
						<th>性别</th>
						<th>班级</th>
						<th>管理</th>
					</tr>
					<tr>
						<td>001</td>
						<td>刘备</td>
						<td></td>
						<td>计本班</td>
						<td >删除</td>
					</tr>
					<tr>
						<td>002</td>
						<td>关羽</td>
						<td></td>
						<td>软件班</td>
						<td >删除</td>
					</tr>
					<tr>
						<td>003</td>
						<td>张飞</td>
						<td></td>
						<td>计本班</td>
						<td >删除</td>
					</tr>
					<tr>
						<td>004</td>
						<td>大乔</td>
						<td></td>
						<td>舞蹈班</td>
						<td >删除</td>
					</tr>
					<tr>
						<td>005</td>
						<td>小乔</td>
						<td></td>
						<td>舞蹈班</td>
						<td >删除</td>
					</tr>
					
				</table>
			</div>
		</div>
		<div id="add_Stu">
			<table>
				<tr>
					<td>学号:</td>
					<td><input type="text" id="s" /></td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td><input type="text" id="name" /></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td><input type="text" id="sex" /></td>
				</tr>
				<tr>
					<td>班级:</td>
					<td><input type="text" id="cls" /></td>
				<tr>
					<th colspan="2">
						<input type="button" id="addStu" value="添加" />
						<input type="button" id="reset" value="重置" />
					</th>
				</tr>
			</table>
		</div>
 </body>
</html>

DaoCss.css

body{
	margin:0;
	padding:0;
}

div{
	position:relative;
	float:left;
}

#div_contain{
	width:80%;
	height:100%;
	margin-left:10%;
	margin-top:5%;
	border-radirs:20px;
}	

#div_StuDao{    
	width:100%;
	line-height:30px;
}

#StuTB{
	border:1px solid black;
	width:65%;
	margin-left:20%;
	margin-top:8%;
	margin-bottom:2%;
}
#StuTB,#StuTB tr,#StuTB th,#StuTB td,#StuTB button{
	border:3px solid black;
	border-collapse:collapse;
	text-align:center;
	font_size:32px;
	font-family:"黑体";
	font-weight:lighter;
}

#add_Stu{
	border:0px solid none;
	width:50%;
	margin-left:42%;
	margin-top:5%;
}
#add_Stu,#add_Stu tr,#add_Stu th,#add_Stu td,#add_Stu button{
	border-collapse:collapse;
	text-align:center;
	line-height:28px;
}

DaoJS.JS:

function get(id){
	return document.getElementById(id);
}

//window.onload = function(){} 页面加载完成,绑定各种事件
window.onload = function(){
   
	var video=get("video"); //获取video
	document.body.addEventListener('mousedown', function(){
		video.muted = false;
	}, false);  //点击事件,点击页面即可开启声音

	var StuTB = get("StuTB"); //获取表格
	var rows = StuTB.rows ; //获取表格所有行
	for(var i = 0 ; i < rows.length ; i++){
		var tr = rows[i] ;
		trEvent(tr) ; //调用事件
	}
	get("addStu").onclick=addStu ; //添加信息事件
}

//封装事件
function trEvent(tr){
	tr.onmouseover = ShowColor ; //表格每行背景颜色的设置事件
	tr.onmouseout = Restore ;
	
	var tdFont = tr.cells ; //获取单元格内容

	for (var j = 0 ; j < tdFont.length ; j++ ){
		tdFont[j].onmouseover = Cursor ; //显示鼠标悬浮每行每个单元格的样式事件			
	}

	for (var j = 0 ; j < tdFont.length-1 ; j++ ){
		tdFont[j].onclick = EditTD ; //编辑事件,删除操作不设置编辑内容
	}

	var DeleteRow = tdFont[4] ;  //获取单元格的删除
	DeleteRow.onclick = DelRow ; //点击删除删除一行的事件
}


//鼠标悬浮在单元格上显示列的背景颜色
function ShowColor(){
	if(event && event.srcElement && event.srcElement.tagName == "TD") { //TD是鼠标悬浮在其单元格上的值,即条件成立,鼠标正悬浮在其单元格上
		var td = event.srcElement ;	//事件源
		var tr = td.parentElement ; //获取tr元素		
		tr.style.backgroundColor = "white" ; //设置颜色
		var tdFont = tr.cells ; //获取单元格内容
		for (var i = 0 ; i < tdFont.length ; i++ ){
			tdFont[i].style.color = "red" ;	 //设置显示颜色
		}
	}
}

//鼠标离开恢复原始样式
function Restore(){
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement ;
		var tr = td.parentElement ;
		tr.style.backgroundColor = "transparent" ; //transparent---透明的意思,即还原样式
		var tdFont = tr.cells ;
		for (var i = 0 ; i < tdFont.length ; i++ ){
			tdFont[i].style.color = "black" ;
		}
	}
}

//设置鼠标悬浮在单元格的样式
function Cursor(){
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement ; //获取事件源
		td.style.cursor = "pointer" ; //设置鼠标悬浮在单元格的样式
	}
}

//编辑单元格内容
function EditTD(){
	if(event && event.srcElement && event.srcElement.tagName == "TD"){
		var td = event.srcElement ;
		if(td.firstChild && td.firstChild.nodeType == 3){ //判断td有子节点,且第一个子节点是文本节点
			var oldTD = td.innerText ; //原单元格内容
			td.innerHTML = "<input type = 'text' size = '5' />" ; //显示文本框
			var input = td.firstChild ; //第一个子节点
			if(input.tagName == "INPUT"){
				input.value = oldTD ;
				input.select() ; //选中内部文本

				input.onblur = updateTD ; //更新单元格编辑的内容
			}
		}
	}
}

//更新单元格上编辑的内容
function updateTD(){
	if(event && event.srcElement && event.srcElement.tagName == "INPUT"){
		var input = event.srcElement ;
		var newTD = input.value ; //输入的内容赋值给newTD
		var td = input.parentElement ; //input节点的父节点是td
		td.innerText = newTD ; //获取新的内容
	}
}

//点击删除删除一行的
function DelRow(){
	if(event && event.srcElement && event.srcElement.tagName == "TD"){
		if(window.confirm("是否确认删除当前行?")){
			var DeleteTD = event.srcElement ;
			var tr = DeleteTD.parentElement ;		
			var StuTB = get("StuTB") ;
			StuTB.deleteRow(tr.rowIndex) ; //获取位置删除该行
		}
	}
}

//添加信息事件
function addStu(){
	var s = get("s").value ;
	var name = get("name").value ;
	var sex = get("sex").value ;
	var cls = get("cls").value ; //获取属性值
	
	var StuTB = get("StuTB") ;
	var tr = StuTB.insertRow() ; //末尾插入一行

	var sTD = tr.insertCell() ;
	sTD.innerText = s ; //将其值插入新增的单元格中

	var nameTD = tr.insertCell() ;
	nameTD.innerText = name ;

	var sexTD = tr.insertCell() ;
	sexTD.innerText = sex ;

	var clsTD = tr.insertCell() ;
	clsTD.innerText = cls ;

	var deleteTD = tr.insertCell() ;
	deleteTD.innerText = "删除" ;

	trEvent(tr) ; //调用事件
}

网页设计问题

视频背景的设置

在网页设计中,我们可能想到把视频设计为网页背景,为其增添不少色彩。如:

background-video

其设置只需在在HTML的主体区域内(body标签)写下如下代码即可。

<video id="video" style="width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; " autoplay loop muted>
		<source src="视频路径" type="video/mp4">
</video>

视频的自动播放

我们在HMTL写下上面的代码后,不难发现视频背景已经成功设置了,同时也能自动循环播放了,但此时是静音循环自动播放的。因为autoplay为自动播放,loop为循环播放,muted为静音播放。如果video中只有autoplay没有muted,是处于待播放状态的(即静止面面),所以自动播放中必须带有muted属性。

不过只是网页添加视频的话,可以在video标签内添加 controls=‘controls’ 属性和属性值,达到控制视频的效果。如图:

在这里插入图片描述

开启声音的问题解决

如果我们想要网页背景视频能自动播放又带声音,该怎么办呢?首先,若是自动播放就开启声音了,我是无法解决的,就是上面的autoplay和muted应该是要一起使用的,从这里就有些矛盾,可能是注重用户体验才有这种情况的设定。

但是,我们可以通过在JS中添加点击事件使其开启声音。效果是打开网页,视频自动播放,开启声音需要你鼠标点击。代码如下:

window.onload = function(){
    var video=document.getElementById("video"); //获取video
	document.body.addEventListener('mousedown', false);  //点击事件,点击页面即可开启声音
}

其中,window.onload = function(){}的添加是因为解决Uncaught TypeError: Cannot read property ‘addEventListener’ of null的问题。
window.onload = function(){事件} 即当页面加载完成后才执行事件。

当你点击网页后,声音便可循环播放了,听多了的确有些影响体验。

在这里插入图片描述


我们可以通过如图点击暂停声音播放。

原文地址:https://blog.csdn.net/qq_56886142

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Css常用的排序方式权重分配 排序方式: 1、按类型&#160;如,显示和浮动、定位、尺寸、字体等 2、按字母&#160;按字母顺序排列,优点是规则简单 3、按定义长度&#160;按照样式定义的字符长度排列 各有优劣,实际应用中,推荐使用第一种。&#160;但是如果单靠前端工程师在编写过程中这么做的
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上效果 基本是用CSS实现的,没有用图片,加一丢丢JS。不过没有考虑太多兼容性。 首先画一个 &lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;
css属性:word-wrap:break-word; 与 word-break:break-all 的用法; zhangq0123 于 2016-10-19 11:06:12 发布 6475 收藏 9分类专栏: CSS HTML 文章标签: html css版权 CSS同时被 2 个专栏收录8 篇
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &l
css之background的cover和contain的缩放背景图 对于这两个属性,官网是这样解释的: contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 等比例缩放图象到垂直或者水平其中一项填满区域。 cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景
.CSS.MAP文件作用 https://blog.csdn.net/qq_36441169/article/details/102575563 1、简介在写前端代码,使用bootstrap时,发现同一个目录下,不仅仅有.css文件的同时,还存在.css.map文件的存在。在前端页面调试时也发现,映
Jquery mobile 写html时文字太长无法自动换行。 Jquery mobile 1 篇文章0 订阅 订阅专栏 加上这个 style=&quot;word-wrap:break-word;word-break:break-all;&quot; 或者 style=&quot;word-wra
详见:http://www.shagua.wiki/project/3 layui图标:http://www.shagua.wiki/project/3?p=85 JQ手册 :https://www.jc2182.com/jquery/jquery-jiaocheng.html css样式手册:ht
css里面圆形的代码,如何使用纯css实现圆形图像或叶子图像?(代码实例) 网易美学于&#160;2021-08-03 22:15:22&#160;发布946&#160;收藏 文章标签:&#160;css里面圆形的代码 有没有想过如何制作那些各式各样的圆形图像而无需用ps,本篇文章就来给你介绍一下如
css文字超出一行就显示省略号 1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hidden; text-overflow:ellipsis; disp
js动态追加数据单独设置某一个元素的样式。 在开发时,我们有很多数据是从后台获取然后展示的,例如列表,最近开发碰到个需求是获取到列表信息之后,不仅仅是拼接展示出来,还需要将其中的第一个li元素设置成其他的样式类,在网上找了一堆的办法都和自身业务需求不一致,没办法自己通过chrome控制台一点点调试,
css3手机端h5商品列表页,两列等分排列技巧 .picture_list {&#x9;width: 100%;&#x9;overflow: hidden}.picture_list&gt;li {&#x9;width: 50%; min-height: 120px;&#x9;float: left;&#x9;padding: 0px 3
css3 transform:scale(x)实现字体的缩放: css3 transform:scale(x)字体的缩放: transform:scale(x),针对于整体的缩放,缩放的整体包括宽,高,背景。这自然对于内联元素就无法使用此属性,最好使用无属性的span转换成块元素或者行内块元素进行设
jq获取第一个子元素并添加class &lt;div class=&quot;main&quot;&gt; &lt;div class=&quot;tit&quot;&gt;颜色&lt;/div&gt; &lt;ul&gt; &lt;li&gt;银色&lt;/li&gt; &lt;li&gt;深灰色
设置背景图片的两种方式,并解决手机端背景图片高度自适应问题 赵世婷&#160;2017-09-19 15:59:43 14372 收藏&#160;5 1 设置背景图片的两种方式: 方式一: .back{undefinedposition: fixed;width: 100%;height: 100%
css层级选择器理论{#ek) E:first-child : 匹配的是E元素,E元素是父元素的第一个子元素 说明:利用 :first-child 这个伪类,只有当元素是另一个元素的第一个子元素时才能匹配。例如,p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能
Css多行字符截取方法详解 时间:2021-07-01 10:21:17 相信有很多同学在写前端页面的时候,都会遇到字符长了需要截取的问题,最简单的方法就是手动去截取,可这样又感觉太low了,今天晚上就来讲讲利用css进行字符的截取,不了解css是如何截取的同学可以和我们一起看看哦! 前言 最近在做
css中content可以用到的字符编码 项目中用到的一些特殊字符和图标 html代码 &lt;div class=&quot;cross&quot;&gt;&lt;/div&gt; css代码.cross{width: 20px;height: 20px;border-radius: 10px;b
CSS 计算属性 calc()的完整指南(上) 2020-05-03 CSS tricks上有一系列的完整指南文章,我后面会翻译这些内容,更新不会一下子完成,而是会分成几个,防止自己因看到文章过长而放弃翻译,一步一个脚印。 CSS有一个特殊的calc()函数,用于做基本的数学运算。下面是一个例子: