JS
关注
分享
扫一扫
走到天涯海角
从坑中爬出后，避免再次入坑！
展开
-
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 · 1294 阅读 · 0 评论 -
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 · 2639 阅读 · 0 评论 -
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 · 1397 阅读 · 1 评论 -
better-scroll的使用以及常见的api总结
转载链接转载 2021-11-21 15:12:23 · 257 阅读 · 0 评论 -
解决在同一个页面中使用vue-awesome-swiper两次的bug
遇到的问题是：下一个轮播插件切换导致上一个轮播插件分页切换的bug解决办法：不需要分页器的那个组件，pagination传空字符串就行原创 2021-11-14 14:48:30 · 1395 阅读 · 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 · 347 阅读 · 0 评论 -
提取图表参数方便复用
伪数据：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 · 120 阅读 · 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 · 1766 阅读 · 0 评论 -
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 · 505 阅读 · 0 评论 -
获取时间的函数
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 · 251 阅读 · 0 评论 -
平常用到的正则
//正则验证//邮箱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 · 186 阅读 · 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 · 359 阅读 · 2 评论 -
切换内容
这个demo还是有些问题，先这样了伪数据：var obj={ realRunTimeList: [ { WORK_NO: "001", WORK_PEO: "金慧鹏", DEVICE_INFO: [ { NAME: "LQ-001", CONTENT: { RUNT原创 2021-05-20 10:55:03 · 114 阅读 · 1 评论 -
echarts饼图切换数据
效果：伪数据：var obj = { //测试 test: [ [ { NAME: "开立", VALUE: "60" }, { NAME: "操作中", VALUE: "25" }, { NAME: "关结", VALUE: "15" }, ], .原创 2021-05-10 13:07:20 · 1124 阅读 · 0 评论 -
用js封装了一个简单的甘特图
改版：原创 2021-04-25 23:24:57 · 355 阅读 · 2 评论 -
柏拉图计算
var arr=[ {BAD_ITEM_CODE:"IPQC01",BAD_ITEM_NUM:5}, {BAD_ITEM_CODE:"IPQC02",BAD_ITEM_NUM:4}, {BAD_ITEM_CODE:"IPQC03",BAD_ITEM_NUM:3}, {BAD_ITEM_CODE:"IPQC04",BAD_ITEM_NUM:2}, {BAD_ITEM_CODE:"IPQC05",BAD_ITEM_NUM:2}, {BAD_ITEM_CODE:".原创 2021-03-25 19:07:38 · 2304 阅读 · 1 评论 -
随机颜色
function getRandomColor() { var rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16); if(rand.length == 6){ return rand; }else{ return getRandomColor(); }}原创 2021-02-25 16:49:11 · 123 阅读 · 1 评论 -
怎么样通过传参使一个div渲染成不同的图表？
伪数据：var obj = { onePart: { dataList: { type: "Line", echartsXaxis: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], echartsSeries: [5, 20, 36, 10, 10, 20] }, }, twoPart: { dataList: { ..原创 2021-02-23 13:50:26 · 257 阅读 · 0 评论 -
React 条件渲染
1.条件渲染：创建 Greeting 组件，根据用户是否登录来显示其中之一：<body><div id="wrapper"></div><script type="text/babel">function UserGreeting(props) {//登录后的组件 return <h1>登录成功!</h1>;}function GuestGreeting(props) {//提示登录的组件 return.原创 2021-02-17 22:39:14 · 197 阅读 · 0 评论 -
React事件处理
1.React 事件绑定属性的命名采用驼峰式写法，而不是小写。2.如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。html的写法：<button onclick="activate()"> 按钮</button>React 中写法为：<button onClick={activate}> 按钮</button>注意：在React中，你不能使用返回false的方式阻止..原创 2021-02-17 17:12:09 · 126 阅读 · 1 评论 -
React Props以及和State的区别、验证器
state 和 props 主要的区别：在于props是不可变的，而 state 可以根据与用户交互来改变。组件需要定义 state 来更新和修改数据，子组件只能通过 props 来传递数据。1.如何在组件中使用 props：<body><div id="wrapper"></div><script type="text/babel">function Hello(props) { return <h1>你好 {pro..原创 2021-02-16 00:07:27 · 209 阅读 · 0 评论 -
React(组件、State(状态))
1.1.定义组件（函数方式）：<body><div id="wrapper"></div><script type="text/babel">function HelloMessage(props) { return <h1>{props.name}!</h1>;}const element = <HelloMessage name="你好啊"/>;const wrapper=document.getE原创 2021-02-15 23:17:13 · 264 阅读 · 0 评论 -
React入门1(JSX、JS表达式、样式、注释、数组)
1.React元素渲染(JSX)<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>React JSX</title><script src="js/react/16.4.0/umd/react.development.js"></script><script src="js/react-dom/16.4.0/umd/re原创 2021-02-03 22:49:33 · 338 阅读 · 0 评论 -
点击当前葡萄，当前葡萄放大
问题：点击当前葡萄，当前葡萄放大，然后把值都填完，然后点击设置，把值设进当前葡萄，然后点击下一个葡萄（下一个葡萄放大），当前葡萄恢复原样原创 2021-01-28 23:55:34 · 166 阅读 · 0 评论 -
postman的使用
form格式可以直接在地址后面拼接参数json格式的话原创 2021-01-28 10:09:40 · 119 阅读 · 0 评论 -
不能在td上使用弹性盒子
不能在td上使用弹性盒子，否则会使td变形原创 2021-01-27 17:29:19 · 665 阅读 · 0 评论 -
js如何将一个数组里的对象替换成另一个数组对应角标的对象或把单个对象替换数组里的对应地方的对象
遇到的BUG是：点击8和13没有效果，点击1和2有效果出现这种情况是因为:......有些代码写错了 grapeInfo:[ {score:'70',color:'violet',date:"8"}, {score:'60',color:'violet',date:"13"}, ]后台传过来的数据只有这么点，但是我循环的时候是一个个循环，所以会出现点击8和13没有效果，点击1和2有对应的效果所以这时候我要定义空数据，然后把原创 2021-01-27 09:56:16 · 3433 阅读 · 0 评论 -
JS把数组转化成新数组或者对象，map和filter的用法
JS把数组转化成新的数组var grapeInfo=[ {score:'22',color:'green',date:"1号"}, {score:'70',color:'green',date:"2号"}, {score:'80',color:'yellow',date:"3号"}]let grapeInfoColor = grapeInfo.map(x => x.color);JS把数组转化成新的对象var grapeInfo = [ { .原创 2021-01-21 22:41:42 · 4724 阅读 · 0 评论 -
葡萄图的封装，以及调用
效果图：代码：1.本地调用：<!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原创 2021-01-06 19:11:54 · 921 阅读 · 2 评论 -
判断每个月有多少天以及计算设计大小和设计屏幕大小之比
/** * 判断是否是闰年 */function isLeapYear(year) { return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);}/** * 获取每个月有多少天 */function getDaysInMonth(month, year) { var days; if (month == 1 || month == 3 || month == 5 || month.原创 2020-12-28 19:20:26 · 118 阅读 · 0 评论 -
Echarts警戒线（markLine），要注意是X轴还是Y轴
option = { "grid": { "top": "8%", "bottom": "8%", "right": "15%", "left": "15%" }, legend: { right:"0", top:"center", orient:"vertical", textSt.原创 2020-11-26 10:31:10 · 2199 阅读 · 0 评论 -
Echarts没有数据的时候显示暂无图片，有数据且大于6条的时候，数据自动滚动
let bei_bot1_main="<div class='bei_bot1_main' id='bei_bot1_main' style='width:calc(100% - 40px);margin:0 20px;'></div>";$("#dom76fd-1602320731255 .view").html(bei_bot1_main);$(".bei_bot1_main").css({"margin-top":getSize(30,1920)+'px'});$("..原创 2020-10-30 14:32:53 · 652 阅读 · 0 评论 -
setInterval定时器（先触发一次再延时），使用Echarts时自动滚动出现的问题
1.之前的写法：数据要5秒才会出来bei_bot2_timeTicket = setInterval(function () { // 每次向后滚动一个，最后一个从头开始。 if (bei_bot2_option.dataZoom[0].endValue == timeInterval.length-1 ) { bei_bot2_option.dataZoom[0].endValue = 5; bei_bot2_option.dataZoo原创 2020-10-30 13:53:36 · 1552 阅读 · 0 评论 -
定时器为啥不能清空呢？
有可能是作用域的问题原创 2020-10-30 10:17:43 · 513 阅读 · 0 评论 -
js取地址栏url参数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js取url参数</title></head><body> <p>?id=.原创 2020-10-09 17:45:00 · 190 阅读 · 0 评论 -
echarts单行柱状图
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>柱状图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head><body> <!-- 为EChart.原创 2020-09-30 13:46:59 · 656 阅读 · 0 评论 -
ECharts南丁格尔图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>dom</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head> <body> <!-- 为ECha.原创 2020-09-30 10:21:43 · 972 阅读 · 0 评论 -
echartsY轴柱状图
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echartsY轴柱状图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head><body> <!-.原创 2020-09-29 13:05:02 · 2052 阅读 · 0 评论 -
echarts象形柱状图
效果：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script></head><body>.原创 2020-09-21 15:17:24 · 979 阅读 · 0 评论 -
jtopo实现左键框选,右键拖拽(拓扑图)，以及设置成不能拖动
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jtopo实现左键框选,右键拖拽</title> <style type="text/css"> body { margin: 0; padding: 0; } #canvas {.原创 2020-09-09 08:55:03 · 1236 阅读 · 0 评论