用html+css+js写简单页面

最新推荐文章于 2024-08-01 09:59:14 发布
最新推荐文章于 2024-08-01 09:59:14 发布
阅读量2.5w 收藏 238
点赞数 28
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41380430/article/details/82631186
版权

用js写简单页面

效果图这里写图片描述
html部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/base.css">
    <script type="text/javascript" src="js/base.js"></script>
    </head>
    <body>
        <div class="login">
            <div class="login-box">
                <span class="caption">欢迎您注册网站会员，如果您已有账户，则可就在此<s>登录</s></span>
                <div class="login-text">
                用&nbsp;户&nbsp;名：<input type="text" class="username"> <span class="span1">用户名支持数字和字母，位数至少为四位</span>
                设置密码: <input type="password" class="password"> <span class="span2">密码支持数字和字母，位数至少为四位</span>
                确认密码: <input type="password" class="passwordss"> <span class="span3">再次输入密码</span>
                手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：<input type="text" class="tel"><span class="span4"></span>
                邮 &nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="email" class="email"><span class="span5">邮箱后面必须带有@号</span>
                验&nbsp;证&nbsp;码 : <input type="text" class="yzm">  <button class="picyzm">获取验证码</button><span class="span6"></span>
                <input type="button"  value="立即注册" class="zhuce">
                </div>
            </div>
        </div>

    </body>
</html>

css部分：

            .login{
                width:780px;
                height:350px;
                background:url(img/bg.jpg)no-repeat;
                background-size:780px 350px;
                margin:100px auto;
                opacity:0.8;
                border:1px solid #999;
            }
            .login-box{
                margin:35px auto;
                width:509px;
                height:280px;
                border:1px solid #999;
                background:rgba(255,255,255,0.7);
                border-radius:10px;
                color:#000;
                box-shadow:2px 2px 8px ;
            }
            .caption{
                margin-top:22px;
                margin-left:14px;
                padding-bottom:6px;
                display:block;
                font-size:8px;
                width:480px;
                height:15px;
                color:#000;
                border-bottom:1px solid #999;
            }
            .caption s,span{
                color:blue;
            }
            .login-text{
                font-size:8px;
                width:460px;
                height:197px;
                margin:3px auto 50px;
            }
            .span1,.span2,.span3,.span4,.span5,.span6,.span7{
                display:inline-block;
                width:230px;
                height:20px;
                font-size:4px;
            }
            input{
                width:160px;
                height:20px;
                border-radius:5px;
                margin:3px 0px;
                border:1px solid #ccc;
            }
            .yzm{
                width:80px;
            }
            .picyzm{
                width:76px;
                height:26px;
                font-size:6px;
            }
            .zhuce{
                outline:none;
                width:76px;
                height:25px;
                background:blue;
                color:#fff;
                border:1px solid #ccc;
                margin-left:80px;
                margin-top:10px;
            }

js部分：

            var username=document.getElementsByClassName("username")[0];
            var pwd=document.getElementsByClassName("password")[0];
            var pwds=document.getElementsByClassName("passwordss")[0];
            var tel=document.getElementsByClassName("tel")[0];
            var email=document.getElementsByClassName("email")[0];
            var picyzm=document.getElementsByClassName("picyzm")[0];
            var yzm=document.getElementsByClassName("yzm")[0];
            var zhuce=document.getElementsByClassName("zhuce")[0];
            var span1=document.getElementsByClassName("span1")[0];
            var span2=document.getElementsByClassName("span2")[0];
            var span3=document.getElementsByClassName("span3")[0];
            var span4=document.getElementsByClassName("span4")[0];
            var span5=document.getElementsByClassName("span5")[0];
            var span6=document.getElementsByClassName("span6")[0];
            var ureg=/[a-zA-Z0-9]{4,}/;
            var treg=/[0-9]{11}/;
            var ereg=/[@]{0}[A-Za-z]{3,}/g;

            username.onfocus=function(){
                username.lastIndex=0;
                username.style.border="1px solid blue";
                span1.innerHTML="用户名支持数字和字母，位数至少为四位";
                span1.style.color="blue";
                username.value="";
            }
            username.onblur=function(){
                if(username.value==""){
                    span1.innerHTML="用户名不能为空";
                    span1.style.color="red";
                    username.style.border="1px solid red";
                }
                else if((username.value!="")&&(username.value.length<4)){
                    span1.innerHTML="用户名长度错误";
                    span1.style.color="red";
                    username.style.border="1px solid red";
                }
                else if(!ureg.test(username.value)){
                    username.style.border="1px solid red";
                    span1.innerHTML="用户名输入错误"
                    span1.style.color="red";
                }else{
                    username.style.border="1px solid #ccc";
                }
            }

            pwd.onfocus=function(){
                pwd.lastIndex=0;
                pwd.style.border="1px solid blue";
                span2.innerHTML="密码支持数字和字母，位数至少为四位";
                span2.style.color="blue";
                pwd.value="";
            }
            pwd.onblur=function(){
                if(pwd.value==""){
                    pwd.style.border="1px solid red";
                    span2.innerHTML="密码不能为空";
                    span2.style.color="red";
                }
                else if((pwd.value!="")&&(pwd.value.length<4)){
                    pwd.style.border="1px solid red";
                    span2.innerHTML="密码长度错误";
                    span2.style.color="red";
                }
                else if(!ureg.test(pwd.value)){
                    pwd.style.border="1px solid red";
                    span2.innerHTML="密码输入错误"
                    span2.style.color="red";
                }else{
                    pwd.style.border="1px solid #ccc";
                }
            }


            pwds.onfocus=function(){
                pwds.lastIndex=0;
                pwds.style.border="1px solid blue";
                span3.innerHTML="再次输入密码";
                span3.style.color="blue";
                pwds.value="";
            }
            pwds.onblur=function(){
                if(pwds.value==""){
                    pwds.style.border="1px solid red";
                    span3.innerHTML="密码不能为空";
                    span3.style.color="red";
                }
                else if((pwds.value!="")&&(pwds.value.length<4)){
                    pwds.style.border="1px solid red";
                    span3.innerHTML="密码长度错误";
                    span3.style.color="red";
                }
                else if(!ureg.test(pwds.value)){
                    pwds.style.border="1px solid red";
                    span3.innerHTML="密码格式输入错误"
                    span3.style.color="red";
                }else if(pwd.value!=pwds.value){
                    pwds.style.border="1px solid red";
                    span3.innerHTML="两次密码不一致"
                    span3.style.color="red";
                }else{
                    pwds.style.border="1px solid #ccc";
                }
            }

            tel.onfocus=function(){
                tel.lastIndex=0;
                tel.style.border="1px solid blue";
                span4.style.color="blue";
                span4.innerHTML="";
                tel.value="";
            }
            tel.onblur=function(){
                if(tel.value==""){
                    tel.style.border="1px solid red";
                    span4.innerHTML="手机不能为空";
                    span4.style.color="red";
                }else if(!treg.test(tel.value)){
                    tel.style.border="1px solid red";
                    span4.innerHTML="手机长度错误"
                    span4.style.color="red";
                }else{
                    tel.style.border="1px solid #ccc";
                }
            }

            email.onfocus=function(){
                email.lastIndex=0;
                email.style.border="1px solid blue";
                span5.style.color="blue";
                span5.innerHTML="";
                email.value="";
            }
            email.onblur=function(){
                if(email.value==""){
                    email.style.border="1px solid red";
                    span5.innerHTML="邮箱不能为空";
                    span5.style.color="red";
                }else if(!ereg.test(email.value)){
                    email.style.border="1px solid red";
                    span5.innerHTML="邮箱输入错误"
                    span5.style.color="red";
                }else{
                    email.style.border="1px solid #ccc";
                }
            }

            picyzm.onclick=function(){
                var num=Array();
                var str="";
                for(var i=0;i<4;i++){
                    num[i]=Math.floor(Math.random()*10);
                    str+=num[i];
                }
                picyzm.innerHTML=str;
            }

            yzm.onfocus=function(){
                yzm.style.border="1px solid blue";
                span6.style.color="blue";
                span6.innerHTML="";
                yzm.value="";
            }
            yzm.onblur=function(){
                if(yzm.value==""){
                    yzm.style.border="1px solid red";
                    span6.innerHTML="验证码不能为空";
                    span6.style.color="red";
                }else if(yzm.value!=picyzm.innerHTML){
                    yzm.style.border="1px solid red";
                    span6.innerHTML="验证码输入错误"
                    span6.style.color="red";
                }else{
                    yzm.style.border="1px solid #ccc";
                }
            }

            zhuce.onclick=function(){
                if((ureg.test(username.value))&&(ureg.test(pwd.value))&&(ureg.test(pwds.value))
                &&(treg.test(tel.value))&&(ereg.test(email.value))&&(yzm.value==picyzm.innerHTML)){
                    zhuce.style.background="red";
                }
            }
一纸情深
关注
简单网页html+css
07-14
一些简单的写网页用的是HTML+css 入门可以看看
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
教你写一个简单的网页（html网页开发入门）
热门推荐
赵不懂的博客
07-14 9万+
一些基本的html知识
HTML + CSS 学习指南：从入门到精通
最新发布
qq_22232065的博客
08-01 930
HTML 和 CSS 在网页开发中扮演着至关重要的角色。HTML 如同网页的骨架，为网页提供了基本的结构和内容。它使用各种标签来定义页面的元素，如标题、段落、图片、链接等，确保信息得以有条理地组织和呈现。CSS 则恰似网页的华服，负责赋予网页美观的外观和舒适的布局。通过控制字体、颜色、背景、间距等样式属性，CSS 让网页变得更加吸引人，提升用户的阅读和交互体验。二者之间的关系紧密且相辅相成。HTML 为 CSS 提供了可操作的基础元素，而 CSS 则依据 HTML 的结构来施展其美化和布局的魔法。
用HTML写自己第一个网页
qq_45441390的博客
10-19 315
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
运用HTML制作网页--第一个网页
queque_heiya的博客
02-13 2638
一．作业目的 通过本作业掌握HTML标记的综合使用方法，学会使用HTML设计一个简单的网页。要求至少使用5种标记以上，最好用到表格或者框架标记。 二．基本原理 用HTML 制作一个简单的网页的过程： （1）用任何文本编辑器（Windows 的写字板、记事本、Microsoft Word或专业的文本编辑器等）输入HTML标记文本； （2）以纯文本格式保存为*.HTML文件； （3）启动浏...
使用html+css实现一个静态页面（含源码）
HTML网页设计
07-27 4047
使用html+css实现一个静态页面（含源码）
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更...
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
HTML+CSS+JS精品网页模板源码153.rar
06-05
下载文件解压缩，用Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件打开，只需更改源代码中的文字和图片可直接使用。图片的命名和格式需要与原图片的名字和格式一致，其他的无需更改。如碰到HTML5+CSS+JS...
利用html+css+js设计的仿原神网页.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
个人博客html+css+JavaScript完整代码
05-23
个人博客，基于html+css+JavaScript的完整代码，内容全面可以直接使用。
js+css+html网页设计
12-21
此网页设计是老师期末时布置的作业，设计用到了JS特效，CSS和HTMl混合使用，里面做的是一个网上买花的小型的购物网站，页面各功能齐全。
HTML-CSS-JS Prettify
02-23
HTML-CSS-JS Prettify
漂亮的后台登陆界面管理页面源码html+js
09-12
自己精心收集漂亮的后台登陆界面管理页面源码html+js，可以结合到ASP.NET（C#),asp,PHP,JSP语言，编写后台功能源码。界面主要包括登陆和管理界面。
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
CSS+HTML+JS----开发简单个人网站
༄༊星河༣
12-30 9107
个人网站分为三个部分，登录界面，主界面，以及分界面。 登陆界面主要核心js代码: <script> function checkLogon(){ var name = document.getElementById("username").value; var pass = document.getElementById("password").value; //判断非空 if((name==null ||
纯CSS+HTML+JS实现的简易个人网站
杨家的小胖几的博客
02-02 3万+
纯CSS+HTML+JS实现的简易个人网站 这是我用CSDN这么久以来第一次用它写博客，废话不多说，先上干货，下面为大家展示一下我做的简易个人网站，我是用HTML+CSS+JS实现的，没有用到后台。音乐吧是网站的功能页面主要有四个： 1.个人简介页面：头像360°旋转 2.个人相册页面：照片有CSS样式，可以翻转 3.个人音乐吧:可以播放音乐，可以改变进度、音量以及切歌 4.个人留言板：有验证...
运行html，css，js好的软件
weixin_34327223的博客
06-13 299
WebStorm： http://pan.baidu.com/s/1eQF81Tw 转载于:https://www.cnblogs.com/lipeng0824/p/4573219.html
用js+css+html怎么写页面
06-10
首先，需要在HTML中创建一个基本的页面结构，例如： ```html <!DOCTYPE html> <html> <head> <title>My Webpage</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Welcome to My Webpage</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <main> <h2>About Me</h2> <p>I am a web developer based in XYZ.</p> </main> <footer> <p>Copyright © My Webpage 2021</p> </footer> </body> </html> ``` 然后，在CSS中定义样式，例如： ```css body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } nav { background-color: #ccc; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 10px; } nav li a { color: #333; text-decoration: none; padding: 5px; border: 1px solid #333; } nav li a:hover { background-color: #333; color: #fff; } main { padding: 20px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` 最后，将CSS文件链接到HTML文件中，例如： ```html <link rel="stylesheet" type="text/css" href="style.css"> ``` 这样就可以用js+css+html写一个简单的页面了。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值