![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 61
AC它真的很香
看心情写博客 | 健忘小天才
展开
-
使用echarts的bmap配置项绘制区域轮廓遮罩
【代码】使用echarts的bmap配置项绘制区域轮廓遮罩。原创 2024-01-02 19:06:45 · 965 阅读 · 0 评论 -
TS知识点复盘
在聊TypeScript 之前先弄清楚两个概念:动态类型语言和静态类型语言。动态类型语言:运行期间才会做数据类型检查的语言,不用给变量指定数据类型。如JavaScript、Ruby、Python等语言。静态类型语言:数据类型检查发生在编译阶段,写程序时需要声明变量的数据类型。如C、C++、C#、Java等语言。TypeScript把不注重类型的动态语言变成关注类型的静态语言。所以到底什么是TypeScript?可以理解为可扩展的JavaScript 或JavaScript 的超集。原创 2022-10-05 21:47:50 · 297 阅读 · 1 评论 -
【Webpack】自定义file-loader时图片解析后出现[object%20Module]
手写file-loader视频讲解根据视频教程一顿操作后,编译后请求图片资源时出现404问题GET http://127.0.0.1:5500/dist/[object%20Module] 404 (Not Found)在搜索引擎里看了半天,很多只是讲了添加这个配置即可,没有说明原理。仅针对于开源的file-loader,而我们自定义loader,不需要这个配置。能解决问题肯定是配置生效了,所以我直接去看了源码,观察这个配置影响了什么内容以下为file-loader源码部分内容截取由此,可以看到es原创 2022-08-07 20:35:48 · 783 阅读 · 0 评论 -
在Next.js中修改Swiper8分页器样式
在Next.js中修改Swiper8分页器样式原创 2022-06-18 21:32:23 · 1627 阅读 · 0 评论 -
Next.js中通过容联云通讯实现手机验证码收发
Next.js中通过容联云通讯实现手机验证码收发原创 2022-06-18 20:25:14 · 593 阅读 · 0 评论 -
使用SVG+JS实现环形进度条
示例运行效果整体思路:1.使用SVG绘制圆环,以及内部百分比的文字2.设置圆环的偏移属性,使其默认长度从0开始3.通过定时器,每隔一段时间修改偏移属性,改变圆环长度,并修改文字的数值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &原创 2022-05-28 20:52:13 · 570 阅读 · 0 评论 -
前端使用canvas将颠倒的图片进行旋转矫正
效果展示图图1为原图图2为180°旋转后的结果图3为镜像翻转的结果相关原理主要是用了canvas里变换相关的API,处理后再使用canvas绘制图片1.旋转图片默认情况下,绘制图片的效果如图1(图中预期为错别字,是区域…)移动原点到canvas的中心点:成像效果如图2绕原点顺时针旋转Pi个弧度,成像效果如图3最后调整从(-img_width / 2, -img_height / 2)这个下标开始画图即可2.图片镜像通过scale调整方向即可。scale(scaleX, s原创 2022-05-18 19:35:24 · 2929 阅读 · 0 评论 -
时间处理相关js模块封装
一个简单的时间处理模块,用于需要展示时间信息的列表中(如聊天列表或其他等)功能当天的时间,显示时+分昨天的时间,显示昨天今年的时间,显示月+日以前的时间,显示年份使用方式如下输出结果dayTransform.js模块export default { dateTime(e) { let old = new Date(e); let now = new Date(); // 获取old具体时间 let d = old.原创 2022-03-21 22:02:19 · 447 阅读 · 0 评论 -
使用云服务器上线网站流程
刚好最近练手了一个开源项目,直接买了一年的服务器时长,上线一下项目,顺便记录流程。校园云+首单一年目前需要40元(记得之前稍微便宜些)。一、购买云服务器可以选择阿里云、腾讯云或其他等等。这里我购买的是腾讯云:https://cloud.tencent.com/act学生可以购买校园云服务器,比较便宜。地址:https://cloud.tencent.com/act/campus镜像推荐选择linux操作系统,适合学习,校园云开箱即用,没有太多配置。其他云服务器可以按自己需求来配置。二、打开控制台原创 2022-02-26 19:51:03 · 1829 阅读 · 2 评论 -
ECharts基础配置
可通过官方案例修改配置查看相关变化 点击前往option = { // color设置颜色,配置项是个数组 color:['skyblue','tomato','gold','green'], // 设置图表的标题 title: { text: 'Stacked Line' }, // 图表的提示框组件 tooltip: { trigger: 'axis' }, // 图例组件 legend: { // series里面有了name值 则le原创 2021-11-30 15:54:03 · 643 阅读 · 0 评论 -
websocket实现基本聊天室功能
效果图如下分别为用户1、2、3的浏览器端页面简易设计了用户进入聊天室后的总人数为当前用户的名称。客户端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid原创 2021-09-01 21:10:43 · 446 阅读 · 0 评论 -
websocket的API使用及node.js搭建websocket服务
客户端代码<!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&原创 2021-09-01 20:17:31 · 465 阅读 · 0 评论 -
DOM元素查询与修改——购物车案例
<!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>购物.原创 2021-08-28 18:14:14 · 170 阅读 · 0 评论 -
【生产实习】web方向实训练习day01
练习一 表格练习要求画出下表<!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">原创 2021-08-23 20:48:01 · 92 阅读 · 0 评论 -
【uni-app】自定义导航栏样式
$system-blue 是我在uni.scss中配置的全局颜色,需要设置scss才能使用<template> <view> <!-- 自定义导航栏 --> <view class="navBarBox"> <!-- 状态栏占位 --> <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>原创 2021-08-15 15:44:15 · 727 阅读 · 0 评论 -
【uni-app】使用iconfont字体
第一步搜索需要的图标,选择图标添加入库第二步网页导航栏的右上角点开购物车,查看已入库图标第三步新建项目,尽量把同一个项目中用到的图标放在一起第四步将图标下载至本地,解压第五步将以下两个文件导入到项目的static下第六步修改iconfont.css文件代码如下@font-face { font-family: "iconfont"; src: url('~@/static/fonts/iconfont.ttf');}第七步在App.vue中引原创 2021-08-11 16:10:04 · 226 阅读 · 0 评论 -
【uni-app】数据缓存
官方文档<template> <view> <view class="home"> <view v-for="item in list"> {{item}} </view> <button @click="setStorage">点击设置数据缓存</button> <button @click="setStorageSync">点击设置数据缓存(同步)</button原创 2021-08-10 14:06:13 · 412 阅读 · 0 评论 -
【uni-app】下拉刷新
官方文档pages.jspn 这里只展示需要设置下拉刷新的页面"pages": [ { "path" : "pages/home/home", "style" : { "navigationBarTitleText": "列表", "enablePullDow原创 2021-08-10 11:20:39 · 136 阅读 · 0 评论 -
【uni-app】底部导航栏页面切换
效果演示直接在pages.json里配置就行了。我丢,和原生Android比真的是太简单了。配置tabBar,内容是数组,2-5个。以下为数组中每一个对象的常用属性text 显示的文字内容pagePath 跳转的页面路径iconPath 未选中时的图标路径selectedIconPath 选中时的图标路径"tabBar":{ "list":[ { "text":"首页", "pagePath":"pages/home/home", "iconPath":"原创 2021-08-08 16:12:35 · 1074 阅读 · 0 评论 -
杭州亚运会倒计时
最近在学Vue,顺便用了框架实现了需求mounted() 是生命周期钩子,在Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)后进行回调<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie.原创 2021-08-07 10:04:38 · 485 阅读 · 0 评论 -
【Vue】列表过滤
用watch实现<!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-UA-Compatible" content="ie=edge"> <t.原创 2021-08-04 11:10:32 · 150 阅读 · 0 评论 -
简单图片切换
JS基础 简单实现图片切换摸鱼写的代码<!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">原创 2021-07-23 15:36:46 · 235 阅读 · 0 评论 -
【立方体旋转效果】让老婆转起来
(ಡωಡ)让老婆转起来知识点旋转和平移,关键字动画<!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=原创 2021-07-20 11:31:06 · 91 阅读 · 0 评论 -
鸭子表练习
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-scal原创 2021-07-20 10:07:50 · 223 阅读 · 0 评论 -
浮动的形象化记忆
刚接触css的浮动,感觉这块不好记忆,通过想象来强化记忆,就写了这篇博客首先要知道文档流的概念网页是一个多层的结构,一层摞着一层,通过CSS可以分别为每一层来设置样式。作为用户来讲只能看到最顶上一层。这些层中,最底下的一层称为文档流,文档流是网页的基础。浮动就是让元素脱离文档流,相当于气球飘到上方了。浮动的特点:1.浮动元素会完全脱离文档流,不再占据文档流中的位置2.设置浮动以后元素会向父元素的左侧或右侧移动3.浮动元素默认不会从父元素中移出4.浮动元素向左或向右移动时,不会超过它前边的其他原创 2021-07-16 19:51:53 · 111 阅读 · 0 评论