分类 HTML 下的文章 - 星逸博客 - 从零到百，从始到钟

登录 / 注册

标签搜索

耀世

累计撰写 91 篇文章
累计收到 10 条评论

搜索到 3 篇与的结果

2022-10-18
JS基础验证登录案例案例用html写一个登录界面可自定义的添加css元素，然后通过点击登录按钮进行验证用户输入的数据是否与内置对象的账号密码匹配代码都写有注释不懂的话下方评论区留言运行结果书写代码<!-HtML+CSS 代码--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户登录 - 星逸</title> <style type="text/css"> /**/ .overall { width: 30%; margin: 0 auto; margin-top: 50px; } /*  */ .title1 { font-size: 35px; color: #1E90FF; font-weight: bold; } /*  */ .title2 { font-size: 25px; color: #000000; } /*  */ .text1 { color: red; font-size: 12px; font-weight: bold; } /*  */ .text2 { color: #000000; } /*  */ .textBox { width: 200px; height: 25px; margin: 10px; border-style: solid; border-color: #A0CFEC; border-radius: 3%; border-width: 1px; } /*  */ .LogDiv { margin-top: 50px; margin-left: 100px; } /*  */ .LogBox { width: 80px; height: 30px; margin-top: 30px; margin-left: 150px; background-color: #1E90FF; border-style: none; border-radius: 5%; color: aliceblue; } .lab1 { margin-left: 80px; font-size: 10px; color: #1E90FF; border-style: none; outline:none; /* border-style:hidden; */ } </style> </head> <body> <div class="overall"> <span class="title1">星逸blog</span> <span class="title2">| 用户登录</span> <div class="LogDiv"> <form name="loginForm"> <span class="text1">*</span><span class="text2">用户名：</span><input type="text" name="UserName" class="textBox" placeholder="请输入您的用户名" /> <br> <span class="text1">*</span><span class="text2">密   码：</span><input type="password" class="textBox" name="UserPwd" placeholder="请输入您的密码" /> <br> <span class="text1">*</span><span class="text2">邮   箱：</span><input type="text" class="textBox" name="UserEmail" placeholder="请输入您的邮箱" onkeydown="emailing()"/> <br> <input type="text" name="labcentent" class="lab1" onclick="Myemail()" readOnly /> <br> <input type="button" name="subLog" value="登录" class="LogBox" onclick="Loging()"/> </form> </div> </div> </body> <script src="js/index.js"></script> </html> //js文件代码 //创建一个用户对象 var admin= { UserName : "admin", UserPwd : "123456", MyName : "耀世", UserEmail:"58535045@qq.com" } //获取邮箱输入的值并且拼接@qq.com function emailing() { var email = document.loginForm.UserEmail.value; email = email+ "@qq.com"; document.loginForm.labcentent.value = email; } //点击把完整的邮箱地址赋值给邮箱 function Myemail() { var labcentent = document.loginForm.labcentent.value; document.loginForm.UserEmail.value = labcentent; } //验证用户登录 function Loging() { //获取用户文本框输入的值 var name = document.loginForm.UserName.value; var pwd = document.loginForm.UserPwd.value; var email = document.loginForm.UserEmail.value; //判断输入是否为空 if(name == "" || pwd == "" || email == "") { alert("您输入的不完整，请重新输入") return false; } //判断用户名输入的内容 for(var i = 0;i < name.length; i++) { var Len = name.substr(i,1); if(Len >= '0'&&Len<='9'|| Len>='a'&&Len<='z'||Len>='A'&&Len<='Z'||&&Len=='_') { continue; } else { alert("含有非法字符") return false; } } //判断用户输入的密码长度是否小于6 if(pwd.length < 6) { alert("密码长度小于六位请重新输入"); return false; } //判断邮箱中是否存在艾特@符合 if(email.indexOf("@") == -1) { alert("邮箱必须包含@"); return false; } //判断邮箱@是否位于邮箱.的前面 58535045@qq.com if(email.indexOf("@") > email.indexOf(".")) { alert("邮箱地址符号@必须在符号.前面"); return false; } //判断用户输入的账号密码是否与用户对象的匹配 else if(name == admin.UserName && pwd == admin.UserPwd) { alert("登录成功，欢迎回来：" + admin.MyName); return true; } //其他错误时进行 else { alert("账号或者密码输入不正确，请重新操作"); return false; } }
- 2022年10月18日
- 33 阅读
- 0 评论
- 1 点赞
2021-12-06
html5基础结构语法效果图如下标签说明：定义页面独立的内容区域定义页面的侧边栏内容。定义了文档的头部区域定义 section 或 document 的页脚定义导航链接的部分定义文档中的节（section、区段）<!doctype html> <html> <head> <meta charset="gb2312"> <title>HTML5 Demo</title> </head> <body> <header> <h1>HTML5</h1> <h2>新增标签功能</h2> </header> <nav> <a href="#">header</a> | <a href="#">nav</a> | <a href="#">article</a> | <a href="#">seation</a> | <a href="#">aside</a> | <a href="#">footer</a> </nav> <section> <article> <h1>section标签</h1> <p>用于定义章节或段落，比如章节、页眉、页脚或文档中的其他部分。</p> </article> <article> <h1>nav标签</h1> <p>定义网站的导航链接菜单。</p> </article> </section> <aside> <nav> <h1>侧栏</h1> <ul type="disc"> <li><a href="#">科技图书</a> 2016-0-23</li> <li><a href="#">科技软件</a> 2016-0-23</li> <li><a href="#">科技词典</a> 2016-0-23</li> </ul> </nav> </aside> <footer> <p>XXXXXX学院机电系</p> <p>版本所属:机电信誉</p> </footer> </body> </html>
- 2021年12月06日
- 46 阅读
- 0 评论
- 0 点赞
2021-12-06
html常见的表单元素效果图如下：HTML中常用的表单元素包括：文本区域，列表框，文本输入框，密码输入框，单选输入框，复选输入框，重置按钮、提交按钮、隐藏域、等等。作业之一也是笔记之一 html的表单元素效果展示以及基本语法都展示出来了代码结合了一点css样式<!doctype html> <html> <head> <meta charset="utf-8" /> <title>常见的表单元素</title> <style type="text/css"> .wbi { color:#3737ff; } table { border:1px; background-color:#cccccc; } td,th { background-color:#ffffff; height:30px; padding:3px; } #tdd { text-align:right; font-size:13px; } #tdd1 { text-align:left; font-size:14px; } #tdd2 { text-align:left; font-size:13px; } </style> </head> <body> <div align="center"> <table> <tr> <th colspan="3">常见的表单元素</th> </tr>  <tr align="center"> <td width="120">名称</td> <td width="400">效果</td> <td width="300">语法</td> </tr>  <tr> <td id="tdd">单行文本域：</td> <td id="tdd1"><input type="text" name="txt1" /></td> <td id="tdd2"><input type="<span class="wbi">text</span>" /></td> </tr>  <tr> <td id="tdd">密码域：</td> <td id="tdd1"><input type="password" name="txt2" /></td> <td id="tdd2"><input type="<span class="wbi">password</span>" /></td> </tr>  <tr> <td id="tdd">单选按钮：</td> <td id="tdd1"> <input type="radio" name="dx" />男 <input type="radio" name="dx" />女 </td> <td id="tdd2"><input type="<span class="wbi">radio</span>" /></td> </tr>  <tr> <td id="tdd">复选框：</td> <td id="tdd1"> <input type="checkbox" name="fx" />篮球 <input type="checkbox" name="fx1" />排球 <input type="checkbox" name="fx2" />羽毛球 <input type="checkbox" name="fx3" />乒乓球 <input type="checkbox" name="fx4" />足球 </td> <td id="tdd2"><input type="<span class="wbi">checkbox</span>" /></td> </tr>  <tr> <td id="tdd">提交按钮：</td> <td id="tdd1"><input type="submit" name="subm" value="我是一个提交按钮" /></td> <td id="tdd2"><input type="<span class="wbi">submit</span>" /></td> </tr>  <tr> <td id="tdd">重置按钮：</td> <td id="tdd1"><input type="reset" name="rest" value="我是一个重置按钮" /></td> <td id="tdd2"><input type="<span class="wbi">reset</span>" /></td> </tr>  <tr> <td id="tdd">普通按钮：</td> <td id="tdd1"><input type="button" name="butt" value="我是一个普通按钮" /></td> <td id="tdd2"><input type="<span class="wbi">button</span>" /></td> </tr>  <tr> <td id="tdd">多行文本域：</td> <td id="tdd1"><textarea rows="3" cols="30" /></textarea></td> <td id="tdd2"><textarea></textarea></td> </tr>  <tr> <td id="tdd">选择列表：</td> <td id="tdd1"> <select> <option>第一项</option> <option>第二项</option> <option>第三项</option> <option>第四项</option> <option>第五项</option> </select> </td> <td id="tdd2"><select></select></td> </tr>  <tr> <td id="tdd">隐藏域：</td> <td id="tdd1"><input type="hidden" name="yc" value="隐藏了你看不到我哈哈哈嗝" /></td> <td id="tdd2"><input type="<span class="wbi">hidden</span>" /></td> </tr>  <tr> <td id="tdd">文件域：</td> <td id="tdd1"><input type="file" name="wj" value="选择文件" /></td> <td id="tdd2"><input type="<span class="wbi">file</span>" /></td> </tr> </table> </div> </body> </html>
- 2021年12月06日
- 66 阅读
- 0 评论
- 1 点赞