JsCssDemo
文章平均质量分 68
Forina_Han
这个作者很懒,什么都没留下…
展开
-
vue3+ts 开发系统 -目录结构
开发系统的部分问题与笔记系统使用vue3+ts进行开发,ui库使用element-ui,系统需求,使用echarts进行图表绘制。构建目录结构assets: 静态目录,存放图标与必需小图iconsimagecomponents: 组件目录publiclayout: 页面公共header / footerplugins: 插件列表router: 路由store: 全局存储type: 全局类型utils: 工具目录services: fetch apihelper:原创 2022-02-03 01:13:42 · 1498 阅读 · 0 评论 -
上传/下载进度条实现
上传下载进度事实上是使用到了xmlhttprequset对象中的progress事件。对于下载,可在xhr.onprogress上做监听。对于上传,可在xhr.upload.onprogress上做监听。监听事件要在xhr.open(method,url)前进行绑定。为了保证正确执行,必须在调用 open()之前添加 onprogress 事件处理程序。–《JavaScript高级程序指南v4》究其原因,可能是由于,xhr.open实现的功能是定义本次请求,xhr.send仅仅是将定义好的请求原创 2021-09-20 10:36:27 · 1472 阅读 · 0 评论 -
promise.all && promise.race
promise.all Promise.prototype.all = function (...iterators) { let res = []; let arr = Array.from(iterators); // 可迭代对象转化 return new Promise((resolve, reject) => { arr.forEach((v, i) => {原创 2021-08-06 23:51:12 · 132 阅读 · 0 评论 -
vue实现树形标题(组件自递归)
被问道了,当时只是简单设计了一下,type等都没加上,重新实现了一下。效果// 数据结构nodes: [ { label: 'title 1', content: 'hello world', children: [ {原创 2021-07-28 14:41:43 · 200 阅读 · 0 评论 -
简单备忘录spa实现(基于vue)
摘要本项目实现目的为巩固vue学习成果。通过实现一个简单的备忘录,复习vue的生命周期、vue组件间通信、router路由与vuex存储,并使用webpack进行项目构建。页面设计来自他人,代码设计均由本人独立完成。样式(写了适应性,但有句话说的好,用户买大屏是为了看更多内容而不是看更大的字,所以事实上最好还是分成两个媒体查询文件写比较好,1024大屏一个,往下平板手机一个。本demo由于时间关系,目前只以媒体查询+栅格+rem的方式来进行适配)主页面: todo页面 显示用户名与今日的未完成的任原创 2021-07-26 23:55:14 · 249 阅读 · 0 评论 -
水果掉落小游戏(原生js+css动画)
摘要水果下落小游戏,采用原生js的dom操作和css的animation,做的比较粗糙,目的是练习原生js的常用操作。游戏功能与界面均为他人设计,本demo具体代码实现由本人独立实现。样式demo功能:水果随机位置下落水果图片随机在水果下落至底部前点击它,加 1 分在水果下落到消失前没有点击到,扣 1 分随时完成分数的统计当水果被点击时产生抖动效果,随后消失点击”开始“进入游戏,再次点击按钮,游戏结束结束游戏时清空游戏界面,即使还有正在下落的水果主要实现方式页面总体布局采用原创 2021-07-20 16:45:11 · 1266 阅读 · 1 评论 -
js实现轮播图组件-显隐切换
摘要面试时,面试官要求设计并实现一个图片轮播 Carousel 组件 说出html/css/js的设计思路要求有自动切换、手动切换上一个面板、下一个面板、指示器提示和点击切换、渐隐切换效果当时回答用定时器、css过渡实现,面试完自己上手写了些,做了一些优化,也学到了很多。样式(注:图片来源自网络,仅做学习用,侵删)demo功能设计一个轮换图组件。过渡效果为显示隐藏。要有底下控制条与左右前进回退按键。本demo控制按键仅在moveover时显示。主要实现方式实现轮播图并不复杂,显隐效果控原创 2021-07-22 20:15:33 · 861 阅读 · 0 评论 -
2048小游戏js实现
摘要2048小游戏,采用原生js的dom操作和css的animation,做的比较粗糙,目的是练习原生js的常用操作。游戏功能与界面均为他人设计,本demo具体代码实现由本人独立实现。样式demo功能:常见的2048游戏功能,通过键盘上下左右键控制格子的移动。游戏结束时alert(“游戏结束”)主要实现方式设置媒体查询,横屏设备以视口宽度设置rem,竖屏设备以视口高度设置rem@media screen and (min-width: 768px),screen and (orient原创 2021-07-21 14:49:14 · 738 阅读 · 3 评论