技术标签: css web Javascrpt 前端 html javascript
个人名片:
作者简介:一名大一在校生,web前端开发专业
个人主页:几何小超
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
**学习目标: 坚持每一次的学习打卡,掌握更多知识!虽然都说前端已死,但是就算不靠这个吃饭,学一点东西总比啥也不知道的好
首先我们来制作b站的回车框
HTML部分
<div class="wrapper">
<i class="avatar"></i>
<textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
<button>发布</button>
</div>
<div class="wrapper">
<span class="total">0/200字</span>
</div>
<div class="list">
<div class="item" style="display: none;">
<i class="avatar"></i>
<div class="info">
<p class="name">清风徐来</p>
<p class="text">大家都辛苦啦,感谢各位大大的努力,能圆满完成真是太好了[笑哭][支持]</p>
<p class="time">2022-10-10 20:29:21</p>
</div>
</div>
</div>
然后就是我们的css部分,我们要实现点击文本框使文本框进行均匀下拉的操作,可以使用focus伪类选择器,
focus是css的一个伪类选择器,可以用来选取获得焦点的元素,然后为这些获得焦点的元素设置样式。
只要是可以接收键盘事件或其他用户输入的元素都可以:focus选择器,大多数情况下:focus选择器都是被使用在链接和表单元素上的。
然后再下面添加运动的路径即可
.wrapper {
min-width: 400px;
max-width: 800px;
display: flex;
justify-content: flex-end;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: url(./images/avatar.jpg) no-repeat center / cover;
margin-right: 20px;
}
.wrapper textarea {
outline: none;
border-color: transparent;
resize: none;
background: #f5f5f5;
border-radius: 4px;
flex: 1;
padding: 10px;
transition: all 0.5s;
height: 30px;
}
.wrapper textarea:focus {
border-color: #e4e4e4;
background: #fff;
height: 50px;
}
.wrapper button {
background: #00aeec;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
width: 70px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
color: #999;
margin-top: 5px;
opacity: 0;
transition: all 0.5s;
}
.list {
min-width: 400px;
max-width: 800px;
display: flex;
}
.list .item {
width: 100%;
display: flex;
}
.list .item .info {
flex: 1;
border-bottom: 1px dashed #e4e4e4;
padding-bottom: 10px;
}
.list .item p {
margin: 0;
}
.list .item .name {
color: #FB7299;
font-size: 14px;
font-weight: bold;
}
.list .item .text {
color: #333;
padding: 10px 0;
}
.list .item .time {
color: #999;
font-size: 12px;
}
接下来就是我们JS部分
我来解析一下下面的思路
还是第一步我们先得获取里面的元素,只有这样才能进行接下来的操作
然后我们来写文本焦点:tx这个文本域制作一个事件,这个事件是获得焦点,让下面的0/200字的文字显示出来
tx.addEventListener('focus',function(){
total.style.opacity=1
})
当我们点击空白的时候得隐藏起来,同意复制上面的代码只需要改成blur就行
tx.addEventListener('blur',function(){
total.style.opacity=0
})
3.然后我们得做一个监听事件,检测用户输入多少字,然后让下面的0/200行来跟着用户变化
tx.addEventListener('focus',function(){
total.innerHTML=`${tx.value.length}/200字`
})
第四步我们开始正式操作
实现按下回车发布评论
这里的keyup是最新版语法已经淘汰之前的keycoad,意思是键盘弹出事件,然后这里的e在keyup里面是回车的意思,所以要写在方法里面
然后我们进行判断,如果用户输入不为空就会显示打印,这边的trim是消除两边空格的意思
item.style.display='block'
text.innerHTML=tx.value
意思是显示文本中的内容,然后最后等我们按下回车结束后,就得清空文本域,所以我们的tx的最后得为空,然后发现我们下面的没有复原,这时候我们还需要加total.innerHtml='0/200字'才能复原成之后的样子
tx.addEventListener('keyup',function(e){
//只有按下回车才会触发
if(e.key === 'Enter'){
//如果用户输入不为空就会显示打印
if(tx.value.trim()!==''){
item.style.display='block'
text.innerHTML=tx.value
}
//等我们按下回车,结束后,清空文本域
tx.value=''
//按下回车就得复原
total.innerHTML='0/200字'
}
})
这是JS源码
<script>
const tx=document.querySelector('#tx');
const total=document.querySelector('.total')
const item=document.querySelector('.item');
const text=document.querySelector('.text')
//1.当我们文本获得焦点,让total显示出来
tx.addEventListener('focus',function(){
total.style.opacity=1
})
//1.当我们文本失去焦点,让total隐藏出来
tx.addEventListener('blur',function(){
total.style.opacity=0
})
// 3.监测用户输入
tx.addEventListener('focus',function(){
total.innerHTML=`${tx.value.length}/200字`
})
//4.按下回车发布评论
tx.addEventListener('keyup',function(e){
//只有按下回车才会触发
if(e.key === 'Enter'){
//如果用户输入不为空就会显示打印
if(tx.value.trim()!==''){
item.style.display='block'
text.innerHTML=tx.value
}
//等我们按下回车,结束后,清空文本域
tx.value=''
//按下回车就得复原
total.innerHTML='0/200字'
}
})
</script>
还是老规矩,为了大家看的清除,我一边进行学习,一边写注释让我更加明白进行的操作,也是为了方便写文章
<!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>评论回车发布</title>
<style>
.wrapper {
min-width: 400px;
max-width: 800px;
display: flex;
justify-content: flex-end;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: url(./images/avatar.jpg) no-repeat center / cover;
margin-right: 20px;
}
.wrapper textarea {
outline: none;
border-color: transparent;
resize: none;
background: #f5f5f5;
border-radius: 4px;
flex: 1;
padding: 10px;
transition: all 0.5s;
height: 30px;
}
.wrapper textarea:focus {
border-color: #e4e4e4;
background: #fff;
height: 50px;
}
.wrapper button {
background: #00aeec;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
width: 70px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
color: #999;
margin-top: 5px;
opacity: 0;
transition: all 0.5s;
}
.list {
min-width: 400px;
max-width: 800px;
display: flex;
}
.list .item {
width: 100%;
display: flex;
}
.list .item .info {
flex: 1;
border-bottom: 1px dashed #e4e4e4;
padding-bottom: 10px;
}
.list .item p {
margin: 0;
}
.list .item .name {
color: #FB7299;
font-size: 14px;
font-weight: bold;
}
.list .item .text {
color: #333;
padding: 10px 0;
}
.list .item .time {
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrapper">
<i class="avatar"></i>
<textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
<button>发布</button>
</div>
<div class="wrapper">
<span class="total">0/200字</span>
</div>
<div class="list">
<div class="item" style="display: none;">
<i class="avatar"></i>
<div class="info">
<p class="name">清风徐来</p>
<p class="text">大家都辛苦啦,感谢各位大大的努力,能圆满完成真是太好了[笑哭][支持]</p>
<p class="time">2022-10-10 20:29:21</p>
</div>
</div>
</div>
<script>
const tx=document.querySelector('#tx');
const total=document.querySelector('.total')
const item=document.querySelector('.item');
const text=document.querySelector('.text')
//1.当我们文本获得焦点,让total显示出来
tx.addEventListener('focus',function(){
total.style.opacity=1
})
//1.当我们文本失去焦点,让total隐藏出来
tx.addEventListener('blur',function(){
total.style.opacity=0
})
// 3.监测用户输入
tx.addEventListener('focus',function(){
total.innerHTML=`${tx.value.length}/200字`
})
//4.按下回车发布评论
tx.addEventListener('keyup',function(e){
//只有按下回车才会触发
if(e.key === 'Enter'){
//如果用户输入不为空就会显示打印
if(tx.value.trim()!==''){
item.style.display='block'
text.innerHTML=tx.value
}
//等我们按下回车,结束后,清空文本域
tx.value=''
//按下回车就得复原
total.innerHTML='0/200字'
}
})
</script>
</body>
</html>
谢谢大家,可能刚开始接触没多久APl,写的地方有些许错误,还是求大家提意见我来改正,哈哈哈,最后记得一键三连哦!!
文章浏览阅读202次。packagecode;//importjava.awt.*;//importjava.awt.Canvas;//importjava.awt.event.*;//importjavax.swing.*;importjava.util.Random;importjavax.microedition.lcdui.*;//写界面所需要的包/***//***俄罗斯方块*高雷*2007年1..._240×320java游戏
文章浏览阅读779次,点赞14次,收藏19次。然后,实现系统的数据管理和服务功能,包括用户的注册与登录、电影的分类与展示、电影信息的查询与推荐、座位的选择与预订、在线支付与电子票生成等。此外,随着在线视频平台的兴起,越来越多的人选择在线观看电影,这对传统电影院产生了巨大的冲击。研究意义: 开发在线电影院售票平台对于提升用户的观影体验、优化电影院的运营效率、促进电影产业的发展具有重要的意义。该系统旨在通过技术手段解决传统电影院售票中的问题,提供一个集成化的电影信息展示、座位选择、在线支付和用户评价平台,同时也为电影院和电影制作方提供有效的工具。
文章浏览阅读509次。保护我们剩下的人的通话信息安全,使用TOX可以让你在和家人,朋友,爱人交流时保护你的隐私不受政府无孔不入的的偷窥.关于TOX:其他牛逼的软件因为一些细化服务问你要钱的时候, TOX分文不取 . 你用了TOX, 想干嘛就干嘛.网友评论:项目源码展示:源码测试效果:最后,如果你学C/C++编程有什么不懂的,可以来问问我哦,或许我能够..._基于c++的即时聊天系统设计
文章浏览阅读584次。鱼弦:CSDN内容合伙人、CSDN新星导师、全栈领域创作新星创作者 、51CTO(Top红人+专家博主) 、github开源爱好者(go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen)当Java服务在Linux系统中运行时,可能会出现swap分区被占用的内存泄露问题,导致系统性能下降或者崩溃。下面是该问题的故障及解决方法、底层结构、架构图、工作原理、使用场景详解和实际应用方式、原理详细描述、相关命令使用示例以及文献材料链接。_linux swap占用很高
文章浏览阅读662次。Alt+F11,然后插入-模块:复制下面代码到编辑窗口:Sub 半角标点符号转换为全角标点符号()'中英互译文档中将中文段落中的英文标点符号替换为中文标点符号 Dim i As Paragraph, ChineseInterpunction() As Variant, EnglishInterpunction() As Variant Dim MyRange..._替换半角宏
文章浏览阅读2.8k次。#.简介: WebView是Android提供的用来展示展示web页面的View,内部使用webkit浏览器引擎(一个轻量级的浏览器引擎),除了展示Web页面外,还可与Web页面内的JS脚本交互调用。WebView内部的WebSetting对象负责管理WebView的参数配置; WebViewClient负责处理WebView的各种请求和通知事件,在对应事件发生时会执行WebViewClient的对应回调; ChromeWebviewClient辅助Webview处理与JS一些交互......_android webview真正加载完成
文章浏览阅读1.6k次。_bitcoin 调试环境搭建
文章浏览阅读4.3k次,点赞93次,收藏94次。为了解决贝塞尔曲线无法局部修正、控制性减弱、曲线次数过高、不易拼接的缺陷,引入B样条曲线(B-Spline)。本文介绍B样条曲线的基本概念:节点向量、支撑性、次数阶数、加权性质、节点生成算法等,为后续曲线计算打下基础。_样条曲线生成
文章浏览阅读902次。配置本地repo库下载我的阿里云盘文件文件放置#创建目录mkdir -p /opt/cloudera/parcel-repo/mkdir -p /opt/cloudera/cm/yum install createrepoCDH 6.2.0 的三个文件放到/opt/cloudera/parcel-repo/中,并且注意把sha256后缀的文件名修改为sha#执行createrepo命令生成rpm元数据 最终/opt/cloudera/parcel-repo/会多一个repodata目录_/opt/cloudera/cm-agent/service/mgmt/mgmt.sh: line 76: /usr/java/jdk1.8.0_181
文章浏览阅读943次,点赞2次,收藏2次。uni.canvasToTempFilePath_uni.canvastotempfilepath
文章浏览阅读3.1k次。SRAM :静态RAM,不用刷新,速度可以非常快,像CPU内部的cache,都是静态RAM,缺点是一个内存单元需要的晶体管数量多,因而价格昂贵,容量不大。DRAM:动态RAM,需要刷新,容量大。SDRAM:同步动态RAM,需要刷新,速度较快,容量大。DDR SDRAM:双通道同步动态RAM,需要刷新,速度快,容量大。........................_sdram 干扰
文章浏览阅读7.3k次。假设表格有A、B、C、D四列数据,希望导入到你的数据库中表格table,对应的字段分别是col1、col2、col3、col4。_excel数据怎么生成sql语句