• Javascript实现具有验证功能的页面登录

    使用JS的函数功能，获取屏幕的宽度和高度，并实现居中效果。登录区域设置一定的宽度和高度；打开登录页面时，登录区在浏览器水平、垂直方向上都居中。登录过程中会有相应的提示功能，输入正确后会显示登录成功，否则失败。

    CSS部分：

    1. <style>
    2.      body{
    3. 	background-image: url(风景.jpg);
    4.     background-position: 60% 100%;
    5. 	background-size:cover;}
    6.     div#login{
    7.     line-height: 3;
    8.     font-family: 楷体;
    9.     font-size: 18px;
    10.     padding: 20px;
    11.     background: no-repeat;
    12.     border: 3px solid black;
    13.     background-color:azure;
    14.     width: 300px;
    15.     position:fixed;}
    16.     style>

    HTML部分：

    1. <body>
    2.     <div id="login">
    3.         用户名：<input id="Na" type="text" class="inputs" onchange="Name()">
    4.         <div id="name" class="red" style="color: red;"></div>
    5.         密&nbsp;&nbsp;码：<input id="pwd" type="password"  onchange="checkPwd()">
    6.         <div id="pwdId" class="red" style="color: red;"></div>
    7.         <input type="button" value="登录">&nbsp;&nbsp;
    8.         <input type="reset" value="重置">
    9.     </div>
    10. </body>

    Javascript部分：

    1. <script>
    2.     var loginDiv = document.getElementById("login");
    3.     var divW = loginDiv.clientWidth;
    4.     var divH = loginDiv.clientHeight;
    5.     var w = window.innerWidth||document.body.clientWidth||document.documentElement.clientWidth;
    6.     var h = window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight;
    7.     var x = (w-divW)/2;
    8.     var y = (h-divH)/2;
    9.     loginDiv.style.left = x + "px";
    10.     loginDiv.style.top = y + "px";
    11.     function Name(){
    12. 	var Na=document.getElementById("Na").value;
    13. 	if (Na!="20201415204"){
    14. 		document.getElementById("name").innerHTML="用户名错误";
    15. 		return false;}
    16. 	document.getElementById("name").innerHTML="用户名正确";
    17. 	return true;}
    18.     function checkPwd(){
    19. 	var pwd=document.getElementById("pwd").value;
    20. 	if (pwd!="123456"){
    21. 		document.getElementById("pwdId").innerHTML="密码错误";
    22. 		return false;}
    23.     if (pwd=="123456"){
    24. 	document.getElementById("pwdId").innerHTML="密码正确";
    25. 	return true;}}
    26. </script>

    效果图：

    JavaScript介绍：

            JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

            JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

            JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

    JavaScript脚本语言具有以下特点:

    （1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

    （2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

    （3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

    （4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

    （5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。 不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

  • 相关阅读:
    如何实现区块构建者角色的去中心化？
    霸榜SPC-1，成立才3年多，这家中国的存储初创公司凭什么？
    从输入URL到页面展示过程
    初识Java 14-2 测试
    Qt开发-QT Quick
    使用html2canvas将html元素保存为图片
    网站推广常用的方式
    计算机网络——层次结构
    pytorch快速入门
    html通过使用图像源的协议(protocol)相对 URL 来防止安全/不安全错误
  • 原文地址：https://blog.csdn.net/qq_64314976/article/details/126409327