js实现登录页面的背景图片的随机展示

最新推荐文章于 2024-05-10 00:45:24 发布

皮卡战记

最新推荐文章于 2024-05-10 00:45:24 发布

阅读量4.3k

点赞数 1

分类专栏： js 文章标签： js 随机背景图片

本文链接：https://blog.csdn.net/ItChuangyi/article/details/80727632

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

####js代码如下：

<script type="text/javascript">
		// 随机展示背景图片 
		var imgSrcs = [ "${ctx}/static/images/background/1.jpg",
				"${ctx}/static/images/background/2.jpg",
				"${ctx}/static/images/background/3.jpg",
				"${ctx}/static/images/background/4.jpg" ];
		var randomBgIndex = parseInt(Math.random() * (imgSrcs.length));

		$(document).ready(
				function() {
					$("body").css("background-image","url(" + imgSrcs[randomBgIndex] + ")");
				});
	</script>

####login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>Teacher-登录</title>
	
	<link rel="stylesheet" href="${ctx}/css/bootstrap.css" />
	<link rel="stylesheet" href="${ctx}/css/login.css" />
	<script type="text/javascript" src="${ctx}/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/bootstrap.js"></script>

	<script type="text/javascript">
		// 随机展示背景图片 
		var imgSrcs = [ "${ctx}/images/background/1.jpg",
				"${ctx}/images/background/2.jpg",
				"${ctx}/images/background/3.jpg",
				"${ctx}/images/background/4.jpg" ];
		var randomBgIndex = parseInt(Math.random() * (imgSrcs.length));
		$(document).ready(
				function() {
					$("body").css("background-image","url(" + imgSrcs[randomBgIndex] + ")");
				});
		
		// 判断是登录账号和密码是否为空
		function checkForm(){
		    var usercode = $("#usercode").val();
		    var password = $("#password").val();
		    if(usercode=="" || password==""){
		    	$("#message").text("账号或密码不能为空！");
		        return false;
		    }  
		    return true;
		}
	</script>
</head>

<body>
	<div class="container">
		<div class="top_div"></div>

		<div class="login">
			<form action="${pageContext.request.contextPath }/login.action"
				method="post" onsubmit="return checkForm()">
				<div style="float: left; padding: 20px 10px 0px 40px;">
					<h4>
						用户登录
					</h4>
				</div>

				<div style="padding: 70px 0px 10px; position: relative;">
					<span class="glyphicon glyphicon-user" aria-hidden="true"
						style="padding: 10px 10px;"></span> <input id="usercode"
						name="usercode" class="ipt" type="text" placeholder="输入用户名" 
						value="">
				</div>
				<div style="padding: 20px 0px 10px;" position:relative;">
					<span class="glyphicon glyphicon-lock" aria-hidden="true"
						style="padding: 10px 10px;"></span> <input id="password"
						name="password" class="ipt" type="password" placeholder="输入密码"
						value="">
				</div>
				<div style="height: 5px">
					<font color="red">
							<span id="message">
								${msg }
							</span>
					</font>
				</div>
				<div
					style="height: 60px; line-height: 50px; margin-top: 30px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">
					<div style="margin: 0px 35px 10px 45px;">
						<span style="float: center; padding: 25px 20px;">
							没有账号？<a href="${ctx }/toRegister.action" >注册</a>一个吧
						</span>
						<span style="float: right; padding: 15px 20px;"> <input
							type="submit" class="btn btn-success border" value="登录" />
						</span>
					</div>
				</div>
			</form>
		</div>
		<div class="bottom_div"></div>
	</div>
</body>
</html>

####页面显示效果

这里写图片描述

欢迎关注公众号：【皮卡战记】

在这里插入图片描述

皮卡战记

关注

1
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
js实现登录页面的背景图片的随机展示

js代码如下：&lt;script type="text/javascript"&gt; // 随机展示背景图片 var imgSrcs = [ "${ctx}/static/images/background/1.jpg", "${ctx}/static/images/background/2.jpg", ...
复制链接

扫一扫