- 博客(26)
- 收藏
- 关注
RSS订阅原创 typescript入门练手小demo
前言最近准备用typescript写点东西，但是关于typescript的东西只是理论看过一些，最近的一次实践还是去年这个时候，当时我在携程实习，公司用的就是typescript。之后，自己也写了大大小小的项目或者demo，使用的都是javascript。刚好最近论文查重过了，时间暂时充裕了起来，就准备练习一下typescript和scss。实现的效果也很简单代码放在了gitee上，仓库地址是ts-demo: vue2+typescript+scss入门练手项目(gitee.com)，感兴趣的掘友可以
2022-05-21 16:23:00
1417
原创 vue2 + canvas 实现简易画板
前言这两天在做QQ聊天机器人，目前也实现了一些功能准备往里面加一些小游戏的功能，思来想去就准备自己实现一个简易版的你画我猜，但是QQ肯定不支持我发个画板过来，于是便诞生了这个网站picture_board (gitee.io)。网站部署在gitee pages上，感兴趣可以去picture_board(gitee.com)下载源代码。实现思路整个页面比较简单，上下的两栏布局。上面是canvas的绘画区域，下面是功能选择区域。（请忽略计时框，这个是为了在你画我猜中，提醒绘画时间用的）canvas
2022-05-08 19:15:31
4932
3
原创 canvas实现下雨、下雪特效
昨天下午，学弟突然发过来一个视频，问我怎么实现这样的特效（emmm，不知道咋上传视频，就录个gif吧）效果也比较简单，于是就自己着手用canvas实现一下。实现思路首先，我们需要设计一下小球对象的数据结构，小球的半径设置为r，颜色设置为color，由于其位置是不断移动的，必须要有x和y坐标。其次，小球可以左移，也可以右移，说明小球要有速度vx和vy。最后小球点击可以停止或者继续移动，需要添加一个属性isMoving来记录当前状态。如下： x: x轴坐标 y: y轴坐标 r: 半径 v
2022-04-27 16:52:39
692
原创 canvas实现时钟特效
这两天在重读《JavaScript 高级程序设计第 4 版》，感觉有了一些新的认识和发现，收获还是挺多的。今天刚刚好阅读到动画和canvas这部分，书中给的一个小示例是一个闹钟当时觉得挺有意思的，就想着自己着手也实现一个类似的特效（本来准备写论文的，前两天感冒了 ，有点不舒服，进度有点迟缓，不过这不影响写代码(▽)）效果图实现思路闹钟的实现思路也比较容易，简单介绍一下思路。先创建一个大圆（闹钟的外层），闹钟的刻度是单个线条，实现单个线条也比较简单，主要就是moveTo和lineTo的使用，结合一
2022-04-27 16:46:35
1491
原创 css实现颜色切换
平时我们写代码的时候，可能会碰到类似这样的需求，比如有一个滚动区域来展示一些内容，一个竖着的导航条显示进度，随着滚动的进行，导航条对应的元素改变颜色（参考微信的通讯录）。然后做一个小的demo来实现基础的颜色切换。示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
2022-01-09 22:37:51
3086
原创 canvas实现头像旋转
我们要想实现头像旋转，需要先创建一个圆形的区域，用来存放头像，然后使用rotate结合translate方法来旋转（因为rotate方法旋转会改变坐标），由于本文章写的内容需要一定的canvas基础，不懂的同学可以移步canvas学习系列笔记预备代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati
2022-01-05 22:04:48
529
原创 vue实现时间实时更新
这两天在写地图项目，有一个需求为实时显示现在的时间，原来我写的代码有一点问题就是刷新了时间才会更新，而不是实时更新，在网上查阅了一些博客，感觉部分同学写的不是很对，于是便有了这篇博客先来看效果图：下面展示具体的代码：vue的template部分<div class = "left"><p>{{ time }}</p><p>{{ date }} {{ weekday }}</p></div><div class = "r
2021-10-07 11:50:56
1905
1
原创 vue+element实现导入和导出excel
自己最近在做一个地图的项目，需要导入excel的相关数据，处理为json之后通过接口发给strapi，网上也查看了许多资料，想借助这个机会也整理一下如何实现该功能引入工具库npm install -S xlsx导入excel这里我用的是elementUI的el-upload组件效果图如下：<el-upload class="upload-demo" action="" :on-change="handleChange"
2021-09-30 22:54:48
1675
原创 strapi安装指南
全局安装这里并没有使用官方推荐的安装方式，yarn create strapi-app my-project --quickstart因为我电脑没有装yarn，一直用的都是npm，所以我写的是npm install strapi -g搜索框输入cmd，以管理员的身份运行，输入strapi -v可以看到如图所示的类似版本号（安装成功）数据库建库这里我选用的是MySQL数据库（老师教过）,提前建了一个空的数据库（下面以test1为实例连接）新建项目在vscode终端里面输入st
2021-09-30 16:02:25
1517
原创 实现三栏布局
整体代码如下：<!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"> <titl
2021-07-11 22:01:26
83
原创 css水平垂直居中（四种方法）
整体的测试代码<!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"> <tit
2021-07-10 21:52:48
110
原创 ES6计算属性
这个是今天学习react注意到的一个内容，react表单，其中提到了ES6 计算属性名称的语法，然后就去网上查了一下有关内容（内容放在了博客底部），自己也测试了一下。<script> let a = "weight"; let obj = { a:100, [a]:110 }; console.log(obj);</script>MDN Object initializer...
2021-07-06 20:26:45
203
原创 数组去重（四种方法）
<script> let arr = [1,2,1,2,1,2,3]; let newArr = []; // newArr = [...Array.from(new Set(arr))]; // newArr = [...new Set(arr)]; // for(let i = 0;i < arr.length;i++){ // if(!newArr.includes(arr[i])){ // new
2021-03-02 15:59:49
2977
原创 文本超出
单行文本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css文本超出</title> <style> div {
2021-01-16 11:33:58
149
原创 css设置单位（字体大小，长度，宽度）
em根据父元素设置子元素的字体大小<!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><body> &l
2021-01-16 10:48:53
5643
原创 垂直水平居中的三角形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container{ position:absolute; top
2020-12-15 17:47:03
155
原创 闭包与变量
闭包只能取得包含函数中任何变量的最后一个值，其所保存的是整个变量对象，而不是某个特殊的变量。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>闭包与变量</title>
2020-09-20 22:31:57
117
原创 Vue事件修饰符
下面是对于冒泡和捕获事件的图示（图片转载于此处）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件修饰符</title> <script src="h
2020-09-16 23:32:29
216
原创 Vue.js Mixins 混入使用
基本用法<!DOCTYPE html><!-- Mixins一般有两种用途：1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="
2020-09-14 21:47:41
308
原创 var和let类型的比较、使用for...in和for...of的区别
var和let类型的比较如果使用的是var声明变量，则是全局变量（除在函数体内部）；如果是let声明变量，则是局部变量。如果是使用循环的话，比如典型的for循环，推荐使用let定义增加或者较少的那个变量；若使用var声明，则这个值会一直存在。 for(var m = 1;m< 5;m++){ console.log(m); } for(let n= 1;n < 5;n++){ console.log
2020-09-11 21:59:01
2703
原创 Vue的JavaScript钩子
JavaScript钩子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>javascript钩子（使用Velocity）</title> <script
2020-09-08 18:56:50
122
原创 ￥emit的使用方法
$emit的用法1(只配合一个事件名使用 )参考文章链接$emit<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>$emit的用法(只配合一个事件名使用 )</title&
2020-09-08 10:20:13
1740
原创 Vue实现登录界面切换
Vue实现登录界面切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src = "https://unpkg.com/vue"></script> <
2020-08-30 20:27:11
3956
原创 Vue实现简单的登陆方式切换
Vue实现简单的登陆方式切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src = "https://unpkg.com/vue"></script> &
2020-08-30 11:19:29
1103
原创 git的部分使用方法
另一台电脑使用git上传文件1.切换至即将上传文件的路径2.登录用户名和邮箱git config --global user.name "用户名"git config --global user.email "邮箱" git init4.添加上传的文件git add git commit -m "测试"git remote add origin 远程仓库urlgit push -u origin master上传到现仓库修改后的文件git init
2020-08-21 16:33:28
69
原创 找数字对
找数字对输入N（2<=N<=100）个数字(在0与9之间),然后统计出这组数种相邻两数字组成的链环数字对出现的次数。例如：输入：N=20 {表示要输入数的数目}0 1 5 9 8 7 2 2 2 3 2 7 8 7 8 7 9 6 5 9输出(7,8)=2 (8,7)=3 (2,2)=2 (5,9)=3 {指(7,8)、(8,7)数字对出现次数分别为2次、3次}代码#include <stdio.h>#include <stdlib.h>int m
2020-08-20 16:05:55
1150
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人