web前端实验三

最新推荐文章于 2023-04-22 23:12:51 发布
最新推荐文章于 2023-04-22 23:12:51 发布
阅读量2.2k 收藏 26
点赞数 13
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alfafar/article/details/116163122
版权

1． 应用JavaScript编写留言的功能，在文本中输入文字提交后，在下方进行显示。
在这里插入图片描述

提示：可将下方内容以列表体现，提交时动态创建列表的项。可使用以下两种方式之一的方法：
1） 使用CreateElenment动态创建li标签及li中的文本
2） 在列表标签ul或者ol对象上设置InnerHtml
列表对象.innerHTML += “

  • 文本内容
  • ” 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div_main{
        width: 254px;

    }
    .text{
        width: 250px;
        height: 100px;
        word-wrap: break-word;
  
    }
    .div2{
        float:right;
    }
    .div_message{
        height: 500px;
        width: 254px;
        margin-top:30px;
    }
    ul{
        margin-top: 20px;
        padding: 0;
    }
    li{
        padding-left: 15px;
        padding-right: 15px;
    width: 224px;
    border-bottom: 1px solid;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    font:15px 黑体;
    }
</style>
<body>
    <div class="div_main">
    <div >
        <input class="text" name="" id="inputbox">
    </div>
    <div class="div2">

        <input type="button" value="提交" id="b1">
        
    </div>
    <div class="div_message">
        <ul id="my_list">

            <li>
                西南石油大学
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
 var bton=document.getElementById("b1");
    bton.onclick=function(){
        var UL=document.getElementById("my_list");
        var message=document.getElementById("inputbox");
            var LI=document.createElement("li");
            LI.innerHTML=message.value;
            document.getElementById("my_list").insertBefore(LI,UL.childNodes[0])
            message.value="";
        
    }
</script>

</html>

    2.设计一个选项卡功能，当鼠标移动至某一选项卡时出现切换。
    在这里插入图片描述
    提示：

    1. 选项卡可采用三个行内元素，为选中背景色#000，选中背景色#aaa
    2. 选项卡内容可采用三个不同列表
    3. 针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000，选中背景色#aaa；文本颜色#fff;；选项内容未选中不显示display:none，选中显示display:block。
    4. 通过JavaScript动态设置样式，页面对象.classname=“class样式选择器”
      如mydiv. className = “selectSpanStyle”
    5. 鼠标移至选项卡设置onmouseenter事件
      如：mySpan.onmouseenter = function(){
      …………
      }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    width: 450px;
    height: 30px;
}
 li{
float: left;
background-color:#000;
width: 150px;
height: 30px;
color:#FFF;
font: 18px 黑体;
text-align: center;
 }
 li:hover{
 background-color: #aaa;
 }
 section{
 height: 300px;
 }
    body{
        background-color:lightgrey;
width:450px;
    }
    .div_main{
        margin-left: 100px;
        height: 30px;
        width: 450px;
    }

    .div_news{

    background-color:#FFF;
    border-bottom-color:#aaa;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    }

</style>
<body>
 
    <nav id="nav">
        <ul>
        <li class="act">热图排行</li>
        <li>美图速递</li>
        <li>前沿科技</li>
        </ul>
    </nav>
    <div id="container">
        <section class="tab" >
            <div class="div_news">aaaaaaaaa</div>
            <div class="div_news">bbbbbbbbbbb</div>
            <div class="div_news">ccccccccccccccc</div>
            <div class="div_news">dddddddddddddd</div>
        </section>
        <section class="tab" >
            <div class="div_news">测试1</div>
            <div class="div_news">测试2</div>
            <div class="div_news">测试3</div>
            <div class="div_news">测试4</div>
        </section>
        <section class="tab" >
            <div class="div_news">测试1测试1测试1测试1</div>
            <div class="div_news">测试2测试2测试2</div>
            <div class="div_news">测试3测试3测试3</div>
            <div class="div_news">测试4测试4测试4</div>
        </section>
       
       </div>
   

</body>


<script>
 window.onload=function () {
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');

 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 for(var i=0;i<oNav.length;i++){
 oNav[i].index=i;
 oNav[i].onmouseenter =function () {
 for(var i=0;i<oNav.length;i++){
 oNav[i].className='';
 oDiv[i].style.display="none";
 }
 this.className='act';
 oDiv[this.index].style.display="block"
 }
 for(var m=1;m<oNav.length;m++){
 oNav[m].className='';
 oDiv[m].style.display="none";
 }
 }
 };
</script>
</html>

    3.设计如下表单，并进行数据验证。
    在这里插入图片描述
    提示：

    1. 输入元素取值可通过var name =document.getElementsById(“元素id”).value;
    2. 判断长度name.length
    3. 是否英文字符开头
    4. 首字母是大小写字符，获取输入的字符对应的编码
      var keycode=name.charCodeAt(0);
      if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){
      不是英文字符
      }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: darkgray;
        height:90%;width:40%;
    position:fixed;
    top:0;right:0;bottom:0;left:0;
    margin:auto;
    }
    .div_bigbox{
        width: 450px;
        
    }
    .div_tiltle {
        padding: 10px;
        text-align: center;
        background-color: skyblue;

    }
    .div_tiltle a{
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
    .div_box2{
        background-color: lightblue;
        height: 300px;
        padding-left: 70px;
        padding-top: 30px;
    }
    .id{
        height: 35px;
        width: 300px;
       padding-left: 10px;
    }
    .password{
        height: 35px;
        width: 300px;
       padding-left: 10px;
    }
    .warn1{
        font-size: 15px;
        color:red;
        display:none;
    }
    .warn2{
        font-size: 15px;
        color:red;
        display:block;
    }

    .warnbox{
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 0px;
        height: 40px;
    }
    button{
        height: 40px;
        width: 300px;
        background-color:darkcyan;
        color:#fff;
        font-size: 20px;

    }
</style>
<body>
    <div class="div_bigbox">
        <div class="div_tiltle">
          <a>注册</a> 
        </div>
        <div class="div_box2">
            
           <input class="id" id="name" placeholder="请输入您的用户名">

           <div class="warnbox">
            <p class="warn1" id="w1">用户名长度必须为6到18位！ </a>
            <p class="warn1" id="w2">用户名必须以英文字母开头！</a>
           </div>

           <input class="password" id="key" placeholder="请输入您的密码">

           <div class="warnbox">
            <p class="warn1" id="w3">密码长度不能小于6位！</a>
           </div>
           <button id ="btn">提交</button>
        </div>

    </div>
</body>

<script >
    window.onload=function () {
    var bton=document.getElementById("btn");
    var W1=document.getElementById("w1");
    var W2=document.getElementById("w2");
    var W3=document.getElementById("w3");
        bton.onclick=function(){
                  W1.setAttribute('style','display:none');
                  W2.setAttribute('style','display:none');
                  W3.setAttribute('style','display:none');
                  var username=document.getElementById("name").value;
                  var userkey=document.getElementById("key").value;
                  if(username.length>18||username.length<6){
                    W1.setAttribute('style','display:block');
                  }
                 var keynode=username.charCodeAt(0);
                 if(userkey.length<6){
                    W3.setAttribute('style','display:block');
                  }
                 var keycode=username.charCodeAt(0);
                 if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){
                    W2.setAttribute('style','display:block');
                 }

      }
    }
</script>

</html>
Alfafar
关注
  • 13
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
课堂作业：web网页实验三
一念之间的博客
09-17 532
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head...
Web前端 实验三
T_Y_F_的博客
04-28 298
Web前端 实验三
web程序设计（前端）实验三（二）——网页设计
weixin_41879980的博客
02-27 1715
设计要求： （1）整个页面采用div布局，宽度600px，并且网页居中，下面再分3个div显示图中的3个段落，这3个div的内边距分别设置为18px 0px 0px；（上右下左）； （2）整个body的字体设置为14px，英文字体采用Arial，中文字体依次采用“微软雅黑”（或Microsoft Yahei），采用font简写方式； （3）标题字体采用h2，字体19px，黑色，加粗；该标题是个超链...
南京邮电大学实验报告
07-31
南京邮电大学2015年电子科学与技术学院软件设计周完整实验报告
html5,web前端实验3
12-22
在本实验中，我们将深入探讨HTML5在Web前端开发中的应用，特别是如何通过基础元素创建一个简易的灯箱画廊以及构建高效的网站导航结构。HTML5作为现代网页设计的核心，提供了许多新的特性和改进，使得开发者能够更...
Web前端 实验 实验三（1）.7z
11-19
实验的标题"Web前端 实验 实验三（1）.7z"表明这是一个关于Web前端开发的学习项目，可能是一个逐步指导或实战练习，旨在帮助学习者掌握网页制作的基本技能。 首先，HTML（HyperText Markup Language）是网页内容的...
html5，web前端实验
12-22
这个"html5，web前端实验"的项目着重于实践HTML5在创建网页时的应用，特别是关于表格、新闻页面排版和使用div进行页面布局的技巧。 首先，让我们详细探讨HTML5中的表格。在HTML4中，表格主要用于数据展示，而在...
html5 web前端实验11
12-22
(1) 检查卡号合法性，出错信息如果1-11-3 卡号规则：长度为10的数字。 图1-11-3 卡号有效性检查页面 (2)检查口令合法性，出错信息如图1-11-4所示。 口令规则：长度不能小于8位或大于15位 图1-11-4 口令有效性...
《web技术》实验指导书
03-01
每次实验后，学生将实验结果等内容写出实验报告，符合实验教学的要求，并得到指导教师的认可。
web实验3实验报告
05-20
1、上机验证教材上第五章示例程序。。 2、开发一个页面，当客户第一次访问时，需在线注册姓名、性别等信息，然后把信息保存到Cookies中。下一次如该客户再访问，则显示“某某，您好，您是第几次光临本站的欢迎信息”。 3．试编写一个ASP程序，实现一个简单的聊天室，能够显示发言人的姓名、发言内容和发言时间等。（提示：利用Application对象）
Vue实现动态创建li实现编写留言的功能
m0_47807991的博客
03-17 1189
例：应用JavaScript编写留言的功能，在文本中输入文字提交后，在下方进行显示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in
WEB实验三2021.4.27
weixin_47786301的博客
04-25 966
WEB实验三 实验内容： 1． 应用JavaScript编写留言的功能，在文本中输入文字提交后，在下方进行显示。 提示：可将下方内容以列表体现，提交时动态创建列表的项。可使用以下两种方式之一的方法： 1） 使用CreateElenment动态创建li标签及li中的文本 2） 在列表标签ul或者ol对象上设置InnerHtml 列表对象.innerHTML += “文本内容” 运行截图 代码： <!DOCTYPE html> <html lang="en"> <head>
Web实验三JavaScript基础及数据验证
最新发布
m0_74331689的博客
04-22 578
掌握JavaScript的编写要求；熟悉应用浏览器进行脚本调试；JavaScript对DOM对象的操作
用javascript实现留言板功能。要求：点击提交按钮，讲输入框中文字添加到显示留言下，并清空文本框；点击删除，将添加的姓名与内容以及删除按钮都删除。js
weixin_47485418的博客
05-12 3510
用JavaScript实现留言板功能，要求：点击提交按钮，讲输入框中文字添加到显示留言下，并清空文本框；点击删除，将添加的姓名与内容以及删除按钮都删除。 CSS样式 <style> *{ margin: 0; padding: 0; } .box{ width: 500px; border: 1px solid red; margin
[基础]PHP Web数据库访问编写简单示例——图书售卖系统示例[2/2]
源计划猿的专栏
06-24 2986
（2020年1月29日11:32:15更新文章排版，内容未修改） 南邮web技术的第三次实验，看起来与上次第二次的内容差别不大，但这次要访问数据库。用php连接的数据库。 代码如下：（分为main.html、process.php、order_query.html、process_query.php) main.html mian.html <html> <head&g...
《Web前端设计与开发》实验三：HTML+CSS综合实验
无
10-09 5810
一、实验内容 用HTML+CSS实现如下页面，要求兼容主流浏览器，代码规范。 二、实验代码及成品 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>环球互联网产业园</title> <link rel="stylesheet" href="css1.css"> </head> <body&gt
前端试题(四)
热门推荐
Stephy_Yy
04-25 6万+
又是新的一周 1. vue过滤器使用场景 2. v-on绑定多个方法 3. 在菜单结构不确定时，前端如何动态渲染 树形结构：深度遍历、广度遍历（递归） 4. Vue-router的钩子函数 5. Vue-router的实现原理 6. Vuex的实现原理 7. Vue-cli的自定义指令 8. keep-alive的两个属性 9. keep-alive组件 10. Vue的核心 11...
编写一个简易的留言薄，实现添加留言和显示留言内容等功能
weixin_30251587的博客
06-27 2083
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose...
HTML与Web前端开发工具基础实验全指南
《HTML实验指导书》是一份针对初学者设计的基础性与综合性实验教材，旨在帮助学习者深入理解和掌握Web前端技术基础。这份教程共分为两部分，涵盖了HTML、CSS和JavaScript的核心内容，以及相关工具的使用。 在第一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值