js實現登入頁面的背景圖片的隨機展示

阿新 • • 發佈：2019-02-07

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>

頁面顯示效果

這裡寫圖片描述

js實現登入頁面的背景圖片的隨機展示

js程式碼如下： <script type="text/javascript"> // 隨機展示背景圖片 var imgSrcs = [ "${ctx}/

js實現登入頁面驗證碼

主要用到的是js生成隨機數 Math.floor();//向下取整 Math.random(); //0.0 ~ 1.0 之間的一個偽隨機數。【包含0不包含1】 <!DOCTYPE html> <html> <head lang="en"> <meta

手把手教小白如何用css+js實現頁面中圖片放大展示效果

1.前言很多童鞋會在專案中遇到一些上傳圖片，展示圖片的操作，但是圖片呢有大有小，為了頁面的美觀，有時候我們需要將圖片展示成固定寬高度，但是呢，領導就會說，我想看大圖片，怎麼辦？想看就看呀，來來來，我

控件實現點擊預覽圖片更改頁面背景圖片的效果

後臺 -i n) border 圖片 pro nta com alt 本實例將在頁面上放置2個ImageButton並設置背景圖片，當點擊其中一個按鈕時對應的會將網頁的背景圖片更改為按鈕的背景圖片。程序實現的主要步驟為：（1）新建一個網站並創建Default.aspx頁面，

簡潔風個人主頁（3） js背景圖片隨機切換

靜態頁面做完了，現在用js做一個背景圖片隨機切換的效果。 1.點選‘個人網站'這個字樣，實現body背景的切換。所以，首先獲取這兩個節點。 var body = document.body; var change_btn = document.getElementById("change

Java登入介面的實現（註冊、登入、背景圖片）

用css3實現頁面背景圖片不重複

也許許多人在做網頁的時候都會遇到過一個這樣的問題，什麼問題呢那就是跟下面這張圖片一樣的問題出現這樣的問題的原因是因為div的大小大於背景圖片的大小，從而導致了背景圖片的重複，其實在css3中解決像這樣的問題特別簡單隻需要新增一個這樣的樣式即可 background

使用plupload.js實現單頁面多例項圖片上傳

工作中經常會遇到單頁面多個上傳模組的功能,比如身份證正反面。使用plupload.js可以非常簡單的實現這個功能。 github下載地址 https://github.com/moxiecode/plupload/tree/master/js 新建plupload.htm

JavaScript 實現背景圖片隨機浮動

只要一個層設定了背景圖片就可以了 js程式碼如下本程式碼用到了jquery了 function floatMove(did,h,w) { this.Obj = $("#"+did); this.tdir = this.ldir = 1; var TH

JavaScript 實現背景圖片隨機浮動2

今天在開啟頁面一直開著的時候，發現昨天程式碼會進入執行時間太長的，所以今天我有修改了一下總算是沒有問題了，我運行了一個下午也沒有出現這樣的問題啊，看來應該是沒有問題了最新程式碼如下 function floatMo

js實現生成中間帶圖片的二維碼

也有一個二維 cnblogs 記錄 qrc href http 找到之前需要實現生成中間帶圖片的二維碼，所以找了半天終於找到一個可以用的。於是在這裏記錄一下。下面是需要註意的幾點： 1、使用的js為jquery-qrcode 但是已經經過別人的修改，和網上原來

js實現手機頁面定位

enable ole code cti point .com ror ext element <script type="text/javascript"> function Location() {}; Location.prototyp

js實現進入頁面後自動跳轉到錨點

是你 .com get targe aid split www. tps com $(function(){ var url = window.location.toString();//進這個頁面的url var id = url.split(“#”)[1];

js實現靜態頁面跳轉傳參

lpar 問題： com 一級目錄 cati expires map AS get 最近有個項目：存靜態web服務，一個新聞頁面列表出所有新聞摘要信息，然後通過點擊新聞詳情訪問到該新聞的詳情頁面；新聞展示的頁面通過ajax請求接口獲取到新聞的摘要信息，

JS 實現兼容IE圖片向左或向右翻轉

raw func -- eat idt urn scrip mage class <!DOCTYPE HTML> <head> <title>JS實現圖片向左向右翻轉</title>

js 實現非同步上傳圖片+預覽

兩種js實現方式，一種用原生的ajax；另一種用JQuery，例子比較簡單，直接上程式碼。 <!DOCTYPE html> <html> <head> <title>Title</title> <link h

pyqt5實現按鈕新增背景圖片以及背景圖片的切換

簡介對與控制元件QPushButton中的可以使用setStyleSheet設定它背景圖片。具體設定背景圖片的方法有兩種 self.button.setStyleSheet("QPushButton{background-image: url(img/1.png)}") 然而對於這種方

JS-會員登入頁面

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>會員登入</title> <link rel="stylesheet" h

java spring 實現登入頁面新增驗證碼

from 表單： <div class="block"> <p class="block-heading">使用者登入</p> <div class="blo

使用js實現html首頁圖片輪播效果

第一步：確定事件(onload)併為其繫結一個函式瀏覽器是邊載入邊執行的，先載入head 再載入body。瞭解body的onload事件的執行時間是非常重要的。onload事件是在網頁載入完畢時執行的。當我們在JavaScript中想要操作某元素時而此元素還沒有載入完成（

js實現登入頁面的背景圖片的隨機展示

js程式碼如下：

login.jsp

頁面顯示效果

相關推薦