Web前端研发实习--学习笔记（5）

最新推荐文章于 2024-06-20 15:44:06 发布
最新推荐文章于 2024-06-20 15:44:06 发布
阅读量118 收藏
点赞数
分类专栏： web研发笔记 文章标签： css javascript html5
本文链接：https://blog.csdn.net/qq_48026875/article/details/120811798
版权

JavaScript实战二——聊天页面

实现功能如下：

完成基本的页面布局；

点击发送实现聊天功能；

正确显示聊天功能；

能够区分A/B的聊天。

<!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>Chat</title>
    <style>
        *{
            background-color:lightcyan;
            margin:0px;
        }
        .box{
            width:600px;
            height:620px;
            background-color: orange;
            margin: 8px;
            border:solid 2px;
        }
        .header{
            background-color: orange;
            border: tomato;
            text-align:center;
            width:580px;
            height: 20px;
            margin-left: 10px;
            line-height: 20px;
        }
        .text{
            width: 580px;
            margin:8px auto 0;
            height: 530px;
            background-color: white;
            border:solid 2px;
            overflow: auto;
        }
        .Amsg{
            margin: 0px;
            background-color: white;
            padding: 4px;
        }
        .Amsg span{
            display: inline-block;
            background-color:aqua;
            border-radius: 5px;
            color:black;
            padding:5px;
            font-size: medium;
        }
        .Bmsg{
            margin: 0px;
            text-align: right;
            background-color: white;
        }
        .Bmsg span{
            display: inline-block;
            background-color:orange;
            border-radius: 5px;
            color:black;
            padding:5px;
            font-size: large;
        }
        .footer{
            width:580px;
            margin :10px;
            height: 40px;
        }
        .form {
            background-color: orange;
            display: flex;
            height: 40px;
        }

        .member {
            width: 50px;
            height: 35px;
            font-size: 10px;
            margin-top: 2.5px;
            padding:0px;
            border:solid 2px;
        }

        #message {
            width: 500px;
            height: 32px;
            line-height: 30px;
            margin-top: 1.5px;
            margin-left: 3px;
            margin-right: 3px;
            padding: 0px;
        }

        .sm {
            width: 50px;
            height: 35px;
            line-height: 30px;
            margin-top: 2.5px;
            margin-left:3px;
        }
    </style>
    <script type="text/javascript">
         window.onload=function(){
            var Chatmsg=document.getElementById("MSG");
            var subbutton=document.getElementById("submit");
            var Chat=document.getElementById("message");
            var Whosay=document.getElementById("who");
            
            subbutton.onclick=function(){
                var str="";
                if(Chat.value==""){
                    alert("消息不能为空，请输入消息");
                    return ;
                }
                if(Whosay.value==0){
                    str='<div class="Amsg">'+'A:'+'<span id="Asay">'+Chat.value+'</span></div>';
                    Chat.value="";
                }else{
                    str='<div class="Bmsg"><span id="Bsay">'+Chat.value+'</span>'+':B'+'</div>';
                    Chat.value="";
                }
                Chatmsg.innerHTML=Chatmsg.innerHTML+str;
            }
        }    
    </script>
</head>
<body>
    <div class="box">
        <div class="header">聊天窗口</div>
        <div class="text" id="MSG">
            <div class="Amsg">
                A:<span id="Asay">吃了吗？</span>
            </div>
            <div class="Bmsg">
                <span id="Bsay">还没吃！</span>:B
            </div>
        </div>
        <div class="footer">
            <div class="form">
                <select class="member" id="who">
                    <option value="0">A说</option>
                    <option value="1">B说</option>
                </select>
                <input type="text" name="聊天信息" id="message">
                <button class="sm" id="submit">发送</button>
            </div>
        </div>
    </div>
</body>
</html>

秃头的fan32021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
笔记-webpack5学习指南-V1.0
08-29
笔记-webpack5学习指南-V1.0
Java Web实习笔记
xiaomuzi0802的专栏
08-15 998
第一天上班，老板给了我一本
Web前端研发实习--学习笔记（4）
qq_48026875的博客
10-17 1037
目录 JavaScript实战一——贪吃蛇 页面布局HTML代码如下： 实现功能的JavaScript代码 JavaScript实战一——贪吃蛇 这个东西其实实际动起手来还是有些问题的，这个也算是真正意义上实现的可以跑的代码。就成就感来说还是有的，我记得最早玩贪吃蛇还是那会用长虹手机的时候，一个贪吃蛇在那里熬好久，现在都好多类型的游戏了，而贪吃蛇的实现让我在面试的时候可以完整的说出来自己对与JavaScript了解的程度。 我从C站上查阅了很多有关贪吃蛇实现的代码，大多是使用canvas画布
web前端研发实习--学习笔记（0）
qq_48026875的博客
10-06 241
目录 一、HTML5背景知识 1.0、JavaScript出场 1.1、浏览器战争 1.2、插件 1.3、语义HTML 1.4、发展态势 二、HTML5简介 2.0、HTML5 是最新的 HTML 标准。 2.1、HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 2.2、HTML5 拥有新的语义、图形以及多媒体元素。 2.3、HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 2.4、HTML5 是跨平台的，被设计为在不同类型的硬件（PC
web前端研发实习--学习笔记（1）
qq_48026875的博客
10-07 993
一、HTML
Web前端研发实习--学习笔记（6）
qq_48026875的博客
10-17 152
目录 JavaScript实战三——员工注册页面 注册页面 信息页面 JavaScript实战三——员工注册页面 功能如下： 合理布局； 样式自行发挥，重置按钮重置输入框； 实现注册功能，页面通过正确方式提交至信息页； 信息页面包含一个表格； 信息页面能够读取注册页面提交的数据，正确回显数据。 注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
配套学习资料：Java开发 - 尚硅谷JavaWeb学习笔记
最新发布
06-22
学习笔记请看我写的文章： Java开发 - 尚硅谷JavaWeb学习笔记 - Part1： ...Java开发 - 尚硅谷JavaWeb学习笔记 - Part5： Java开发 - 尚硅谷JavaWeb学习笔记 - Part6： Java开发 - 尚硅谷JavaWeb学习笔记 - Part7：
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于Web的云的学习笔记系统设计与实现-java代码
04-16
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...
Java Web 实习笔记（三）
MOGOT7的博客
06-14 766
Java web实习笔记目录导航 1. Java Web 实习笔记（一） 2.Java Web 实习笔记（二） 3.Java Web 实习笔记（三） 4.Java Web 实习笔记（四） 一、UserDao创建 package com.hmm.dao; import java.sql.Connection; import java.sql.ResultSet; import ja...
Java Web 实习笔记（一）
MOGOT7的博客
06-11 3963
Java web实习笔记目录导航 1. Java Web 实习笔记（一） 2.Java Web 实习笔记（二） 3.Java Web 实习笔记（三） 4.Java Web 实习笔记（四） 一、WEB概述 1、C/S 和B/S （1）C/S（client-server 客户端-服务器） 需要下载安装：QQ，LOL （2）B/S（brower-server 浏览...
大三前端实习日志
热门推荐
不认真写代码的姑娘
08-17 5万+
大三暑期选择实习：工作内容：前端web实习 实习地点：武汉光谷 公司规模：创业型公司，前端开发人数为9人，实习生5名1.实习内容总结：1.前端html+css页面结构培训实习内容：为完成UI设计稿到页面的实现。使用Photoshop切图，html+css完成页面制作 实习完成时间：5天 实习过程：前期： 到达公司，完成了基本的人事报到。找到自己座位，连接好电脑。公司中为迎接新人开了一个迎新会
CSS 实现电影信息卡片
qq_33003143的博客
06-16 730
综合运用CSS知识实现电影信息卡片
发博客了发博客
Cherry_garcia的博客
06-17 410
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。-- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。-- 1.IE盒子模型||怪异盒子模型 box-sizing: border-box;-- 1.标准盒子模型 box-sizing: content-box;弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
纯css星空动画
JiuMeilove的博客
06-17 527
让大家实现一个这样的星空动画效果,大家会怎么做?其实使用css就能写。我也不藏着掖着,源码直接放下面了。
HTML(14)——结构伪类选择器和伪元素选择器
m0_74386799的博客
06-20 398
作用：根据元素的结构关系查找元素例如：查找第一个li标签，将背景改为绿色
css-Echarts图表柱状图，X轴横坐标值显示不完全问题
2301_76671906的博客
06-18 535
Echarts图表柱状图，X轴横坐标值显示不完全问题
vue音乐播放条
南北粉面馆
06-17 297
【代码】vue音乐播放条。
CSS阴影优化气泡框样式
qq_39691676的博客
06-18 241
【代码】CSS阴影优化气泡框样式。
CSS详解
警警的博客
06-17 1046
CSS样式表的优先级是由多个因素决定的，这些因素共同决定了当多个样式应用于同一个元素时，哪个样式会被最终应用。总结：文档流是CSS中最基本、最重要的概念之一，它决定了网页的整体布局和排版方式。文档流（Document Flow）在CSS中是一个核心概念，它决定了HTML元素在页面上的默认布局和定位方式。它是一个独立的渲染区域，在这个区域内的布局不会影响到区域外的元素，反之亦然。文档流定义了元素的布局顺序和定位方式，包括元素的位置、大小、间距等属性。大部分与布局和盒子模型相关的CSS属性都是不可继承的。
zynq-linux移植学习笔记
06-28
### 回答1： zynq-linux移植学习笔记应包含以下内容: 1. 对zynq架构和硬件资源的理解，包括PS和PL部分的特点。 2. 如何使用Xilinx SDK来编译和配置u-boot和Linux内核。 3. 如何在硬件平台上运行和调试Linux系统。 4. 怎样在Linux系统中配置和使用各种硬件资源，如DMA、Ethernet、Flash等。 5. 如何在Linux系统中移植和运行应用程序，并与硬件资源进行交互。 6. 如何进行系统优化和资源管理，以提高系统性能和稳定性。 ### 回答2： Zynq是一款Xilinx公司开发的一种嵌入式系统芯片，其使用了双核Cortex-A9处理器和可编程逻辑器件（FPGA）的组合。移植Linux到Zynq芯片中，可以使其具备无限的扩展能力，极大地拓展了其应用领域，因此掌握Zynq-Linux移植技术是非常重要的。 Zynq-Linux移植分为四个主要步骤： 第一，准备工作 在移植前，需要确认硬件平台是否支持Linux运行，并且需要对硬件进行配置，最好使用Zynq开发板的官方配置； 第二，内核移植 内核移植是整个移植过程中最关键的一步。需要根据硬件平台的特性对内核进行选择和配置。可以从内核源代码库中获取内核代码，然后进行交叉编译。移植内核的过程中需要注意内核配置参数的设置，同时也要确保内核模块和驱动程序的编写。 第三，文件系统移植 在移植Linux的过程中，文件系统也是非常重要的。可以使用开发板官方Linux镜像，也可以自己编译镜像。移植文件系统还涉及到root文件系统的配置、挂载方式、网络配置和各种服务的配置等问题。 第四，驱动移植 驱动程序是连接硬件和软件的关键部分，需编写相应的驱动程序来实现对硬件的控制。移植驱动程序的过程中需要关注各种硬件接口和设备驱动API的使用，确保驱动程序与硬件配合良好。 总结来说，Zynq-Linux移植技术的掌握需要具备较强的Linux基础知识、驱动开发经验和交叉编译工具链的使用能力。同时，还需要有耐心和细心，对每个步骤进行仔细的分析和处理。 在学习中，需要结合实际开发项目，多进行实践操作才能更好地掌握Zynq-Linux移植技术，为后续项目的开发和应用提供更好的支持。 ### 回答3： Zynq-7000系列是一种由Xilinx开发的SoC（系统级芯片），它将双ARM Cortex-A9处理器和可编程逻辑（FPGA）集成在一起。这使得开发人员可以使用硬件加速加速器来加速运行在Linux上的各种应用。然而，实现这个目标需要进行移植。 在开始Zynq Linux移植学习笔记之前，需要一些基本的知识。首先，需要了解Linux内核的基本工作原理和Linux驱动程序的编写技术。然后，需要了解FPGA和SoC体系结构。 在开始移植之前，需要为SoC开发板选择正确的Linux发行版。这通常需要考虑处理器体系结构，内存大小和设备驱动程序的可用性。另外，还需要考虑是否需要自定义内核或驱动程序以满足应用程序的需求。 接下来，需要编写设备树文件（DT）来描述SoC架构。设备树文件是一种描述硬件配置信息的特殊语言。它会告诉内核有哪些设备可用以及如何访问这些设备。 接下来，需要配置Linux内核以支持Zynq-7000处理器。这可能包括启用适当的内核配置选项，编写设备驱动程序以及配置启动过程。 最后，需要启动Zynq板并验证Linux系统稳定运行。这些步骤包括在启动过程中将设备树文件加载到内存中，以及启动用户空间应用程序。 总之，移植Zynq Linux是一项复杂的任务，需要广泛的专业知识和技术。但是，它可以为开发人员提供强大的硬件加速支持，使他们能够加速处理一系列计算密集型应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值