js登錄界面代碼自用,使用js製作簡易登錄頁面

本文目錄一覽:

如何用js製作Tab欄官網登錄界面

1、在桌面找到並且打開js軟件。

2、新建一個項目,並且保存打開項目。

3、依次寫入想要的官網代碼即可。以上就是用js製作tab欄官網登錄界面的方法。

求用js和html寫出靜態網頁的登錄窗口的代碼

function login(){

if (document.login.usename.value== “logon” document.login.password.value ==”logon”) {

location.href=”main.html”;

//document.login.usename 跟document.login.password 中的login 要換成你的表單名稱, //usename、password 要換成你 字段的名稱。

}else{

return false;

}

}

用javascript編寫一段用戶名和密碼登錄代碼。點擊登錄按鈕後,頁面跳轉到另一個頁面,顯示此用戶名和密碼的

function login()

{

var username=document.getElementById(“userName”);

var password=document.getElementById(“password”);

if(username.value==”admin”password.value=”123456″)

{

window.location.href=”success.html”;

}

}

為登錄按鈕註冊onclick=「login()」

JS登錄界面如何儲存用戶名和密碼信息,實現登錄的時候查詢驗證匹配,不用數據庫有三個用戶,求JS代碼

HTML代碼

!DOCTYPE html

html

head

meta charset=”UTF-8″

meta http-equiv=”X-UA-Compatible” content=”ie=edge”

titleDocument/title

/head

body

div

用戶名 : input type=”text” name=”username” id=”username_input”/br

密碼 : input type=”password” name=”passwd” id=”passwd_input”/br

input type=”button” value=”登錄” onclick=”login()”

/div

/body

/html

Js代碼

script type=”text/javascript”

var accountAll = [

{‘username’ : ‘admin’,’passwd’ : ‘admin123’},

{‘username’ : ‘jack’,’passwd’ : ‘jack’}

] // 存儲賬戶json數據的數組

function login(){ //登陸判斷

var username = document.getElementById(‘username_input’).value; // 獲取username輸入框內容

var passwd = document.getElementById(‘passwd_input’).value; // 獲取passwd輸入框內容

var account = accountAll.filter(function(e){return e.username == username})[0]; // 篩選賬號返回數組,不存在則返回空數組

if(!account){

console.log(‘賬戶不存在’);

} else {

if(account.username == username  account.passwd == passwd){

console.log(‘登陸成功’);

} else {

console.log(‘登陸失敗’);

}

}

}

/script

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/159810.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-11-20 00:15
下一篇 2024-11-20 00:16

相關推薦

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    編程 2025-04-29
  • Python字符串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字符串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字符串寬度不限制的情況下,我們可以寫出很長很長的一行代碼。但是,為了…

    編程 2025-04-29
  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述,力求讓讀者深刻理解Python基礎代碼。通過本文的學習,相信大家對Python的學習和應用會更加輕鬆和高效。 一、變量和數…

    編程 2025-04-29
  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在着手設計之前,我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面: 1、庫存管…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面,為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手,選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    編程 2025-04-29
  • Python實現簡易心形代碼

    在這個文章中,我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹,逐步深入了解如何實現這一任務。 一、安裝Python …

    編程 2025-04-29
  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中,我們不可避免地需要編寫一些長段代碼,包括函數、類、複雜的控制語句等等。在編寫這些代碼時,我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    編程 2025-04-29
  • 北化教務管理系統介紹及開發代碼示例

    本文將從多個方面對北化教務管理系統進行介紹及開發代碼示例,幫助開發者更好地理解和應用該系統。 一、項目介紹 北化教務管理系統是一款針對高校學生和教職工的綜合信息管理系統。系統實現的…

    編程 2025-04-29
  • Python愛心代碼動態

    本文將從多個方面詳細闡述Python愛心代碼動態,包括實現基本原理、應用場景、代碼示例等。 一、實現基本原理 Python愛心代碼動態使用turtle模塊實現。在繪製一個心形的基礎…

    編程 2025-04-29

發表回復

登錄後才能評論