打卡ts day02--使用typescript 写评论demo
demo.ts
// DataHelpler 类 用于操作localStorage
class DataHelpler {
dataKey: string; //localstorage key
primaryKey: string; // id constructor(dataKey: string, primaryKey: string) {
this.dataKey = dataKey
this.primaryKey = primaryKey
} // [{content:'3333', id :1},{content:'3333', id :1}]
// 读取本地数据
readData(): any {
let pinglunStr: string | null = localStorage.getItem(this.dataKey)
let pinglunArr: any = []; // 这一定要给默认值
if (pinglunStr) {
pinglunArr = JSON.parse(pinglunStr)
}
return pinglunArr
}
// 存本地数据
saveData(pinglunArr: object[] ): void {
let pinglunStr: string = JSON.stringify(pinglunArr)
localStorage.setItem(this.dataKey, pinglunStr)
}
// 新增本地数据
add(pinglunValue: string): number {
// 1.先取值
let Data: any = this.readData()
// 2.评论对象
let obj:any = {
content: pinglunValue
}
// 3.自动生成primaryKey obj[this.primaryKey]
// 拿到本地存储中最后一个值的primaryKey +1
let newId: number = Data.length > 0 ? Data[Data.length -1][this.primaryKey] + 1 : 1;
// 4. 将primaryKey 值 存到obj
obj[this.primaryKey] = newId
Data.push(obj)
this.saveData(Data)
return newId
}
// 删除
remove(ID: number | string): boolean {
debugger
// 1.先取值
let Data: any = this.readData()
// 2.遍历Data
let Index :number = Data.findIndex((item:any) =>item[this.primaryKey] == ID)
if(Index !== -1) {
Data.splice(Index, 1)
this.saveData(Data)
return true
}
return false
}
}
demo.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.neirong,
.pinglun,
.addpinglun {
border: 1px solid #000;
}
</style> <body style="width:50%;margin: 10px auto">
<div class="neirong">
<p>文章内容哈哈哈哈红红火火恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚惚</p>
</div>
<div class="pinglun">
<ul id="ul">
<!-- <li>评论1112323 <span style="float:right;margin-right:30px;">删除</span> </li> -->
</ul>
</div>
<div class="addpinglun">
<textarea name="" id="textarea" cols="70" rows="10"></textarea>
<button id="add">新增评论</button>
</div>
</body>
<script src="./js/demo.js"></script>
<script>
let dh = new DataHelpler('plData', 'id') window.onload = function () {
init()
} // 渲染评论列表
function init() {
let data = dh.readData()
let str = ''
if (data) {
data.forEach(item => {
str += `
<li>${item.content} <span data-id="${item.id}" onclick="del(this)" style="float:right;margin-right:30px;cursor:pointer;">删除</span> </li>
`
});
} else {
str += `
<li> 暂无数据 </li>
`
}
document.querySelector('#ul').innerHTML = str
} // 新增
document.querySelector('#add').onclick = function () {
dh.add(document.querySelector('#textarea').value)
init()
document.querySelector('#textarea').value = ''
} // 删除功能
function del(element) {
dh.remove(element.getAttribute("data-id"))
init()
} </script> </html>
效果图
打卡ts day02--使用typescript 写评论demo的更多相关文章
- 手写Spring+demo+思路
我在学习Spring的时候,感觉Spring是很难的,通过学习后,发现Spring没有那么难,只有你去学习了,你才会发现,你才会进步 1.手写Spring思路: 分为配置.初始化.运行三个阶段如下图 ...
- 如何写好demo——学习感悟
文章标题:教你如何写好Demo应用 如何制作出最有用的demo呢? 简,易 在demo中,我们要专注于单一的主题.我们的教学覆盖了很大的知识范围,因此,化整为零是非常必要的. 例如,我们要说明Andr ...
- [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??
0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...
- 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async）
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- 【TS】358- 浅析 TypeScript 设计模式
点击上方"前端自习课"关注,学习起来~ 作者:DD菜 https://zhuanlan.zhihu.com/p/43283016 设计模式就是软件开发过程中形成的套路,就如同你在玩 ...
- 17、vue-cli3 js项目中引入ts混用（typeScript）
说明: vue3.0搭建的项目,不过没有引入ts,后来需要用到一个插件是用ts写的,所以vue要用到ts... 一.安装typescript及loader npm install typescript ...
- Bestreviewapp给iOS软件写评论赚钱
BestReviewApp 这是一个评论类的活动,网站上会提供App列表,在iTunes评论这些应用就能获得报酬.目前账号中的余额可通过PayPal或支付宝提取出来.BestReviewApp 开放的 ...
- hdoj_2546饭卡(强忍悲痛，好好写题解)
Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...
- 【7-9 有重复的数据I (20 分)】【此题卡输入，需要自己写个输入挂】
参考一个博客的输入挂,先挂在此处,以备以后使用. import java.io.*; import java.util.*; import java.math.*; public class Main ...
- vue ts ,vue使用typescript，三种组件传值方式
参考链接:https://juejin.im/post/5c55156f6fb9a049ef270541
随机推荐
- .Net引用根目录子文件夹下的dll文件
在.Net开发的时候,有时候会引用一套库,这些库是由多个dll文件.正常情况下,这些dll文件需要拷贝到运行根目录下.如果这些dll文件比较多,加上其他直接引用的dll,这样会导致根目录下非常乱.我们 ...
- VS2019注册码
Visual Studio 2019 Enterprise BF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 Professional NYWVH-HT ...
- [Unity]Update()与FixedUpdate()
Update()介绍 首先我们从官方文档的介绍了解: MonoBehaviour.Update() Description Update is called every frame, if the M ...
- java入门与进阶P-5.5+P-5.6
投票统计 写一个程序,输入数量不确定的[0,9]范围内的整数,统计每一中数字出现的次数,输入-1表示结束 循环遍历 通常都是使用for循环,让循环变量i从0到<数组的length,这样循环体内最 ...
- CSS中的各种格式化上下文-FC（BFC）、IFC、GFC、FFC）
什么是FC? FC是Formatting Context的缩写,中文名:格式化上下文.是 W3C在CSS2.1 规范中的一个概念. FC是指页面中一篇渲染区域,渲染区域内使用的格式化上下文的渲染规则, ...
- STL关联式容器使用注意、概念总结
引入 继上文 STL序列式容器使用注意.概念总结 继续总结关联式容器的概念以及一些使用事项. 关联式容器与容器适配器 基础容器 STL 中的关联式底层容器:RB tree, hash table,可以 ...
- 11月21日内容总结——多进程实现TCP服务端并发、互斥锁、线程及代码实现、GIL全局解释器锁、信号量、event事件、进程池和线程池、协程
目录 一.多进程实现TCP服务端并发 二.互斥锁代码实操 1.互斥锁的概念 2.互斥锁的使用 3.死锁现象 4. 小结 三.线程理论 进程 线程 线程简介 为什么要使用多线程? 多线程概念 多进程的优 ...
- day07-SpringMVC底层机制简单实现-03
SpringMVC底层机制简单实现-03 https://github.com/liyuelian/springmvc-demo.git 7.任务6-完成控制器方法获取参数-@RequestParam ...
- Windows服务安装小工具
主要为了方便Windows服务的安装卸载,不需要使用CMD命令. 先给大家小工具的效果图: 使用此工具需要注意一下几点: 1.服务程序的.NET Framework版本: 2.服务名称与服务执行程序名 ...
- P10_组件-text和rich-text组件的基本用法
常用的基础内容组件 text 文本组件 类似于 HTML 中的 span 标签,是一个行内元素 rich-text 富文本组件 支持把 HTML 字符串渲染为 WXML 结构 text 组件的基本使用 ...