js实现登录页面的背景图片的随机展示
程序员文章站
2022-05-31 09:11:38
...
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>