走到天涯海角-优快云博客

原创使用animation来实现时段的滚动效果

实现固定高度的左右滚动,因为是看不是操作,所以不用表格来做,自己要用的时候也可以使用JS来控制向左的偏移值。

2025-04-11 15:04:29 223

原创 svg实现一个圆形以及方形的环形进度条

3. 写个公用的js方便调用，可以自己改造。4. 调用js以及传数据进去。2. svg实现方形进度条。

2024-05-30 20:03:01 785

原创 React里面table组件的时间轴的位置计算

思路是这样，如果滚动条不滚动的话，那么时间轴的位置就是基本值250+(两个时间戳相减*4)；滚动的话，就是把滚动的距离减掉；计算时间轴位置倒是容易，主要是React里面的antd的table组件怎么监听滚动是个问题。后来使用onScrollCapture来监听到横向滚动的数值。本来尝试使用ref的那种方式，后来发现行不通。如上图的时间轴位置计算。

2024-01-19 17:42:45 1094

原创页面整个刷新会造成计时器变量名丢失，要存localStorage里面

【代码】页面整个刷新会造成计时器变量名丢失，要存localStorage里面。

2024-01-11 11:55:46 992

原创图表的线体是动态的，3条到6条

【代码】图表的线体是动态的，3条到6条。

2022-09-29 11:21:12 1163 1

原创 antDesignReact的多选下拉框在修改页面显示初始值

使用antDesignReact的多选下拉框遇到的坑

2022-06-02 15:10:27 1733 2

原创 echart自定义显示标题

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echart自定义显示标题</title>  <script src="echarts/echarts.min.js"></script></head><body> .

2022-04-18 17:12:57 2570

记一下JQ实现全选，方便以后直接使用选中的话使用prop，attr似乎没有效果dom.find(".sche-all-check").off("click").on("click", function () { var allCheckStatus = dom.find(".sche-all-check").is(":checked") dom.find("input[type='checkBox']").each(function () {

2022-03-23 15:30:21 823

原创 JQ版本甘特图

效果图：1.甘特图容器：  <div class="gantt-control"></div>2.初始化甘特图：var ganttControl = new GanttControl({ $el: $(".gantt-control") });3.提供方法来渲染变化的甘特图(时间精度到分钟)var obj = { //甘特图 gantt.

2022-03-13 22:01:45 1326

原创 JQ版本日历控件

效果图：如何调用呢？<!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"> .

2022-03-02 20:47:27 2664

转载 element的Cascader 级联选择器中怎么去掉节点的选中状态

bug是clearable清空没有效果，还是显示之前选中的状态<!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, initia

2022-01-20 10:19:30 1440 1

转载 better-scroll的使用以及常见的api总结

转载链接

2021-11-21 15:12:23 263

原创在element的表格上点击对应格变为input进行编辑,能改多列

效果图：思路大致和改一列差不多，只是根据label来判断点击的是哪一列。

2021-11-18 20:53:38 446

转载在element的表格上点击对应格变为input进行编辑,只能改单列

在element的表格上点击对应格变为input进行编辑

2021-11-18 10:15:50 902 2

原创在static中使用本地json数据时报Request failed with status code 404

发现是路径写错了

2021-11-16 21:58:14 794

原创解决在同一个页面中使用vue-awesome-swiper两次的bug

遇到的问题是：下一个轮播插件切换导致上一个轮播插件分页切换的bug解决办法：不需要分页器的那个组件，pagination传空字符串就行

2021-11-14 14:48:30 1425 2

原创转载获取时间范围的JS

function getDay(day) { var today = new Date(); var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day; today.setTime(targetday_milliseconds); //注意，这行是关键代码 var tYear = today.getFullYear(); .

2021-11-12 14:42:52 374

原创日周月图表样式

伪数据var obj = { //日 dayList:{ title: "日", echartsXaxis: ["10-20", "10-21", "10-22", "10-23", "10-24", "10-25", "10-26"], seriesData: [{ name: '测试1', type: "line", data: [13, 27, 49, 88,.

2021-10-26 17:10:28 454

原创安装Stylus:Module build failed: TypeError: this.getOptions is not a function

安装stylus npm install stylus stylus-loader --save-devnpm run dev后报错如何解决：降低stylus-loader的版本stylus-loader版本过高，更改为stylus-loader@3.0.1即可再次安装stylusnpm uninstall stylus stylus-loader npm install stylus stylus-loader@3.0.1 --save-dev //再次安装...

2021-10-26 00:14:02 451

原创如何解决git:failed to push some refs to ‘地址‘问题

git pull --rebase origin master输入账号和密码，不要忘记自己的账号和密码git push -u origin master多尝试

2021-10-25 22:34:34 292

原创遇到peer webpack@“^5.0.0“ from stylus-loader@6.2.0问题记录

npm install stylus --savenpm install stylus-loader --save执行第二句的时候报错在package.json文件的devDependencies对象里面加上"stylus-loader": "^3.0.2",然后重新执行命令npm install stylus-loader --save-dev

2021-10-25 20:00:12 7908 4

原创 A complete log of this run can be found in

发现vue老是安装不上一堆的报错，我琢磨着，我安装vue前也只安装了一个node，之前安装都好好的，我这次不过是用了以前的版本，难道是这个原因......NPM版本太低，更新NPMnpm install npm -g然后再安装脚手架和测试，发现可以正常运行了...

2021-10-18 20:30:49 200

原创 Branch ‘master‘ set up to track remote branch ‘master‘ from ‘origin‘.

打算推送代码到码云上面出现了报错：添加到本地仓库git add .添加提交描述git commit -m "第一次提交"提交前先从远程仓库主分支中拉取请求git pull origin master把本地仓库代码提交git push -u origin master关键：我好像是少了，提交前先从远程仓库主分支中拉取请求这步，所以每次都没有同步成功。...

2021-10-07 09:48:48 4939

原创 Vue中遇到无法加载文件的问题，在系统上禁止运行脚本

遇到问题如下：如何解决这个问题呢？系统：win10左下角菜单区域，搜索PowerShell执行：set-ExecutionPolicy RemoteSigned这时候再运行vue create one-vue就不会报错了。

2021-10-06 22:28:28 311 1

原创从基础到项目（vue2.0 app实战（5））温故知新

5.1 项目环境准备1.需要安装node2.通过码云管理代码2.1 新建一个git仓库3.安装git如何让git仓库和本地做关联呢？如何生成SSH公钥呢？1.右键点击git Bash here根据上面截图来添加成功后1.克隆仓库代码到本地如何在仓库里面安装Vue环境呢？关键：全局安装vue-cli：npm install -g @vue/cli5.2 项目代码结构介绍5.3 单文件...

2021-10-06 17:43:55 225

原创从基础到项目（vue2.0 app实战（4））温故知新

Vue中的动画特效4.1 Vue中CSS动画原理（过渡动画）如何做到渐隐渐显的动画效果呢？关键：只要在想实现动画的容器外加上transition标签，并加上相应的样式。 <style> .v-enter{ opacity: 0; } .v-enter-active{ transition: opacity 1s; } </style>.

2021-10-05 11:13:14 233 1

原创从基础到项目（vue2.0 app实战（3））温故知新

3.1 组件使用的细节点细节点1：关键：当我们把tr封装成小组件，会出现些小问题。<body> <div id="app"> <table> <tbody> <row></row> </tbody> </table> </div> <script&

2021-10-04 16:32:31 224 1

原创从基础到项目（vue2.0 app实战（2））温故知新

2.1 Vue实例一个Vue的项目是由很多很多Vue实例组成的。属性和方法2.2 Vue实例的生命周期钩子关键：生命周期函数就是Vue实例在某一个时间点会自动执行的函数，生命周期函数不放在methods里面beforeCreate函数：基础的初始化之后调用，初始化一些事件和生命周期created函数：初始化完成之后调用，处理外面的注入以及双向绑定的一些内容询问是否有el选项，显然是有的询问是否有template,显然没有。没有template的话，它会把整个el里面的内容

2021-10-02 22:49:47 295 2

原创从基础到项目（vue2.0 app实战（1））温故知新

1.NUXT服务器端渲染，WEEX编写原生APP2.内容：基础内容->基础语法->MVVM模式->组件化-> 生命周期->动画特效-> 实战项目->环境搭建->使用Git->数据模拟->本地开发联调->真机测试->上线3.知识点：Axios：获取数据Vue Router：页面路由Vuex：组件间数据共享异步组件：代码上...

2021-10-01 22:53:54 492 1

原创提取图表参数方便复用

伪数据：var obj={ "dataNameList":[ "2021-09-18", "2021-09-19", "2021-09-20", "2021-09-21", "2021-09-22", "2021-09-23", "2021-09-24" ], "dataValueList":[ "10", "20", ...

2021-09-24 11:51:36 127 1

原创怎么样判断复选框（checkBox）选中了几个？

关键在：怎么样判断当前元素被选中？$(ele).prop("checked")function getCheckBox(curObj,curList){ var arr=[]; curObj.map((index,ele)=>{ if($(ele).prop("checked")){//被选中 var obj=curList[index]; arr.push(obj); ...

2021-09-16 11:46:41 1796

原创 localStorage存储对象需要注意的点

localStorage没办法直接存储对象var obj={"name":"小明","sex":"男"}存对象localStorage.setItem("obj",JSON.stringify(obj));取对象var obj=JSON.parse(localStorage.getItem("obj"));console.log("obj"，obj);

2021-09-15 14:11:39 516

原创获取时间的函数

function getNowDate() { var d = new Date(); var year = d.getFullYear(); var month = change(d.getMonth() + 1); var day = change(d.getDate()); var hour = change(d.getHours()); var minut.

2021-09-05 13:43:04 261

原创平常用到的正则

//正则验证//邮箱var emailStr = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//单价(包含小数点)var priceStr = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;//数量(只包含数字)var numStr = /^\d+$/;//手机号码(用例)var telStr = /^[1](([3][0-9])|([4][5-9])|([5].

2021-08-18 15:00:42 194 2

原创 nginx.conf配置要格外注意

配置nginx.conf要格外注意，不然很头疼配置失败了很多次，后面终于可以了events{}http{server{listen 8080; #访问路径 server_name 公网IP; location / { #转发目的地 root /sites/demo; index index.html index.htm; }}

2021-07-06 19:57:04 164 2

原创计时器实现3秒切换一次内容

效果图：伪数据：var obj={ //实时运行情况 realRunTimeList:[ { WORK_NO: "001", WORK_PEO: "金慧鹏", whEntryInf: [ { AREA: "金慧鹏-001", REQUEST_MATERIEL: "32", REQUEST_NUM: "33", COMPLETE_NUM: "..

2021-05-21 13:44:51 378 2

原创切换内容

这个demo还是有些问题，先这样了伪数据：var obj={ realRunTimeList: [ { WORK_NO: "001", WORK_PEO: "金慧鹏", DEVICE_INFO: [ { NAME: "LQ-001", CONTENT: { RUNT

2021-05-20 10:55:03 123 1

原创 echarts柱状图的柱子不同颜色

效果图：伪数据：timeList: [ { PERIOD: "计划上线总数", OUTPUT: "280" }, { PERIOD: "异常单数", OUTPUT: "20" }, { PERIOD: "合格单数", OUTPUT: "280" }, ],<!DOCTYPE html><html><head> <m

2021-05-18 14:19:28 575