纯生JS：留言板实现

最新推荐文章于 2023-02-20 16:19:21 发布
最新推荐文章于 2023-02-20 16:19:21 发布
阅读量77 收藏
点赞数
原文链接：http://www.cnblogs.com/wangxinyubokeyuan/p/7425351.html
版权

1.实现点击发布【创建li标签，和a标签，以及内容】；

2.实现删除部分【因为删除也是点击以后的事件所以在这里面内写】

3.最后解决一个BUG，内容为空不能点击发布

4.整体代码如下：

 

转载于:https://www.cnblogs.com/wangxinyubokeyuan/p/7425351.html

diashungui8854
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简易留言板
qq_40687516的博客
12-21 487
<!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-...
纯生Html + Css +Js实现贪吃蛇（附源码）（个人练习）
m0_53479584的博客
08-05 1061
如题，今天用原生js实现贪吃蛇小游戏，主要是记录一下以及加深学习，大佬勿喷！
纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
weixin_33748493的博客
08-06 310
现在实现的有基础用法、可清空、密码框，参考链接：https://element.eleme.cn/#/zh-CN/component/inputHTML代码：想要测试哪个组件，直接将对应组件解开注释即可，标红的js和css记得修改成你自己的位置。js实现可清空input组件//普通input输入框document.write(createElementInput())//添加可清空功能cleara...
JS纯生实现无缝滚动轮播图
diashungui8854的博客
09-10 163
1.定时器加上以后需要进入一次才能引用，所以在上面提前调用一次定时器； 2.当在实现下标小按钮的时候一定要给第三部的num赋值； 3.切记谁做动画谁加定位 转载于:https://www.cnblogs.com/wangxinyubokeyuan/p/7500914.html...
纯生JS轮播，定时器添加和清除定时器
ThShy的博客
11-26 779
js轮播笔记 代码实现了简单的文字左右切换和图片覆盖隐藏效果，点击方框按钮会切换图片及文字描述，鼠标放上图片时清除定时器 html <div class="phoShow" id="phoShow"> <ul class="phoUl" id="phoUl"> <li class="phoShow"><a href="#"><img src="images/moShou.jpg" height="300" width="630"
纯生js写的省，市，区三级联动
qq_41919732的博客
09-20 473
HTML <select name="" id="province"> <option value="0"> --------------省-------------- </option> </select> <select name="" id="city" disabled="disabled"> ...
使用纯生js实现图片轮换
weixin_30507481的博客
10-03 44
效果图预览.　　 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"...
纯生js ajax,jQuery $.support获取浏览器的名称与版本信息
weixin_35284593的博客
08-06 756
在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。代码如下获取浏览器名称和版本号$(function () {var strTmp = "您的浏览器名称是：";i...
原生js如何实现上拉加载，下拉刷新？
m0_68009075的博客
02-20 459
JavaScript如何实现上拉加载，下拉刷新？
jquery+纯生javascript写的适合初学者
11-14
写于初学时，适于初学者，仅供参考，随意分享，——————巨石糖果山
无菌瓶装纯生啤酒灌装新工艺-精品创业计划书模板.rar
09-17
无菌瓶装纯生啤酒灌装新工艺-精品创业计划书模板.rar
无菌瓶装纯生啤酒灌装新工艺-精品创业计划书模板.pdf
04-23
无菌瓶装纯生啤酒灌装新工艺-精品创业计划书模板.pdf
青岛纯生巡礼活动全程策划提案.doc
10-01
青岛纯生巡礼活动全程策划提案.doc
纯生啤酒品牌概念与包装测试.pptx
09-23
纯生啤酒品牌概念与包装测试.pptx
无菌瓶装纯生啤酒灌装新工艺.zip
09-16
无菌瓶装纯生啤酒灌装新工艺.zip
青岛纯生巡礼活动全程策划提案_20161001203031.doc
10-07
青岛纯生巡礼活动全程策划提案_20161001203031.doc
创业计划书-无菌瓶装纯生啤酒灌装新工艺
08-25
创业计划书-无菌瓶装纯生啤酒灌装新工艺
Java7英文纯生版API
01-22
Java7英文纯生版API，英文原版可以帮你更好的理解Java； 解压后进入API文件夹，点击index页面进入。
怎么在纯生vue中封装使用骨架屏呢
最新发布
05-18
在纯生 Vue 中封装使用骨架屏可以通过以下步骤实现： 1. 创建一个骨架屏组件 Skeleton.vue，该组件包含需要展示骨架屏的元素和动画效果。 ``` <template> <div class="skeleton"> <div class="skeleton-item" v-for="i in 3" :key="i"></div> </div> </template> <style> .skeleton { display: flex; align-items: center; justify-content: center; } .skeleton-item { width: 50px; height: 50px; margin: 0 10px; background-color: #ccc; border-radius: 50%; animation: pulse 1.2s ease-in-out infinite alternate; } @keyframes pulse { from { opacity: 0.6; } to { opacity: 1; transform: scale(1.1); } } </style> ``` 2. 在需要展示骨架屏的组件中引入 Skeleton.vue 组件，并添加一个 Boolean 类型的数据 isLoading，用于控制展示骨架屏或实际数据。 ``` <template> <div> <h1>{{title}}</h1> <Skeleton v-if="isLoading" /> <div v-else> <!-- 展示实际数据 --> </div> </div> </template> <script> import Skeleton from './Skeleton.vue' export default { components: { Skeleton }, data() { return { isLoading: true, // 实际数据 } }, mounted() { // 获取实际数据 this.getData() }, methods: { getData() { // 发送请求获取数据 // ... // 数据请求完成后关闭骨架屏 this.isLoading = false } } } </script> ``` 3. 在 Skeleton.vue 组件中可以根据实际需求进行自定义，例如添加不同的动画效果、修改元素样式等。 通过以上步骤可以在纯生 Vue 中封装使用骨架屏，可以优化用户体验，提升页面加载速度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值