- 博客(46)
- 收藏
- 关注
RSS订阅原创 vue的provide的使用
provide的使用方法：在父组件中定义provideprovide和data，methods同级provide中返回值是一个对象，相当于将对象中的内容注入到子孙组件子孙组件使用inject: [ 由provide键名组成的数组 ] ，来获取父级组件的方法或者其他属性具体看代码父组件： provide(){ return{ closeCurrent:this.closeCurrent, reload: this.routeReload // 刷
2021-04-29 17:20:17
17330
原创 FullCalendar vue v5的使用
前面的安装和引入非常简单所以直接跳过以下是本人在写FullCalendar的时候的一些问题：1、使用FullCalendar自定义的模板及内容在FullCalendar标签内部使用插槽<template v-slot:eventContent="arg"></template>eventContent是内容区域，在template里面就可以定制自己的日程了arg可以获取到initialEvents这个属性的所有内容 <template v-slot:event
2021-04-14 16:55:31
2675
2
原创 js 两种方法实现统计数组中每个字符串出现次数 例如 [‘aa‘, ‘ab‘, ‘ab‘, ‘cc‘, ‘cba‘] 统计之后 { aa: 1, ab: 2, cc: 1, cba: 1 }
js代码方法一：使用for–of循环 var a = ['aa', 'ab', 'ab', 'cc', 'cba'] var obj = {} for (const value of a) { if(!(value in obj)){ obj[value] = 1 }else { obj[value] ++ } } console.log(obj)方法二：普通for循环
2021-03-03 10:00:13
950
原创 关闭vue的eslint的两个方法
方法一：在根目录下建立一个vue.config.js文件，然后在其内部输入module.exports={ lintOnSave: false}方法二：找到.eslintec.js文件，注释掉'@vue/standard'
2021-02-26 11:15:03
223
原创 js 第1步：随机生成json对象，格式为：“[[{“text“:XXXX},{“text“:XXXX}],[{“text“:XXXX},{“text“:XXXX},{“text“:XXXX}]]“
js代码： function getNum(){ var x = parseInt(Math.random()*10000); return x; } function getObjNum(){ var x = parseInt(Math.random()*21+10); return x; } function erweiNum(){ var x = parseInt(Math.random()*
2021-02-23 09:54:49
3402
原创 js 实现拖拽移动到指定区域并删除
<img src="image/02.jpg" alt="" draggable="true" id="img1"><img src="image/02.jpg" alt="" draggable="true" id="img2"><img src="image/02.jpg" alt="" draggable="true" id="img3"><div id="box_b"></div>var box_s = document.getE
2021-02-19 22:02:00
934
原创 js 使用闭包方法输出点击事件对应的index值
var li = document.getElementsByTagName("li");console.log(li)for(var i = 0;i < li.length;i++){ (function(i){ li[i].onclick = function(){ this.index = i; console.log(this.index) } })(i)}
2021-02-04 10:59:02
173
原创 js 通过构造函数和原型实现div的运动
js代码：var btn = document.getElementById("btn");function Div(width,height,left,top,bgcolor){ this.width = width; this.height = height; this.left = left; this.top = top; this.bgcolor = bgcolor;}Div.prototype.createDiv = function(){
2021-02-03 09:00:56
182
原创 js 两个方法实现扁平化数组: 如[1,[2,3]] ---＞[1,2,3]
方法一：（缺点套第三层的话就无效）var arr = [1,[2,3],2,[4,5]];for(var i = 0;i < arr.length;i++){ if(arr[i].length > 1){ // console.log(arr[i]) for(var j = 0;j < arr[i].length;j++){ var z = arr[i].shift(); j--;
2021-01-21 10:45:04
254
原创 js 两个方法构建n*n的格子（n从输入框填写），鼠标放上去背景变成红色，移除恢复正常 鼠标点击格子背景固定为蓝色，鼠标hover时也不变红，再次点击恢复正常 格子大小可用css控制，默认背景色都是
var num = document.getElementById("num");var btn = document.getElementById("btn");btn.onclick = function(){ var n = num.value; for(var i = 0;i < n;i++){ for(var j = 0;j < n;j++){ var div = document.createElement("div"
2021-01-19 10:16:06
245
原创 js 三种方法实现给你一个字符串，要你找出里面出现次数最多的字母和出现的次数，例如：“abaasdffggghhjjkkgfddsssss”；
方法一:（正则法）var str = "abaasdffggghhjjkkgfddsssss";var arr1 = []; //用于存放每轮循环相同的字符串var str2 = ""; //用于存放出现次数最多的那个字符var max = 0; //用于存放出现的最大次数（就是数组arr1的长度）for(var i = 0;i < str.length;i++){ var reg = new RegExp(str[i],"g"); arr1 = str.mat
2021-01-13 09:37:27
1230
原创 js 三个方法实现封装一个方法，startWith(str,s) 判断一个字符串，是否是s结尾。
方法一：function starWith(str,s){ var len = s.length - 1; if(str.lastIndexOf(s) == (str.length - 1)-len){ console.log("该字符串是"+s+"结尾"); }else { console.log("该字符串不是"+s+"结尾"); }}starWith("strs","trs")方法二：function endWith(str,
2021-01-07 17:01:24
251
原创 jq 实现第二个html页面接受第一个html页面的参数并模拟渲染数据
第一个html页面的js代码：$.ajax({ url:"/xinyuncan/json_home/data.json", //读取的是项目中测试用的json文件 type:"GET", dataType:"json", success:function(data){ console.log("连接成功"+data); showData(data); },
2021-01-05 09:42:46
489
原创 解决使用load添加其他页面的时候导致一瞬间样式错乱
这是我在近期写项目的时候遇到的一个问题，我是这样解决的首先html代码：在代码中设置body默认样式为隐藏<body style="display: none;"></body>然后js代码：在代码中设置load的回调函数让body再显示出来$(".har_title").load("/xinyuncan/footer.html",function(){ $("body").show(); $(".fir_content").removeClass("se
2021-01-04 10:48:17
483
原创 js 实现封装一个函数，删除一个字符串中所有给定的子串。问题描述：在给定字符串中查找所有特定子串并删除，如果 没有找到相应子串，则不作任何操作。
方法一：常规法function fn(str1,str2){ while(str1.indexOf(str2) != -1){ var len = str2.length; var str = str1.split(''); str.splice(str1.indexOf(str2),len); str1 = str.join(''); return str1; }}console.log(fn("1234
2020-12-28 21:34:44
501
原创 jq 实现京东放大镜效果，和切换图片功能
html代码：<div class="container"> <div class="box_left"> <img src="image/02.jpg" alt="" class="im1"> <div class="con"> <img src="image/zoom_pup.png" alt=""> </div>
2020-12-24 08:57:31
537
原创 jq 实现移动端拖动侧滑菜单显示和隐藏
js代码：var startPositionX = 0; var endPositionX = 0; var move = 0; var right = 0; var pr = 0; $(document).bind("touchstart",function(e){ right = 0; pr = -($(".right_bar").offset().left + $(".right_bar").innerWidth() - $("
2020-12-22 20:16:27
533
原创 js 实现trim()的两种方法
方法一：function fn(str){ var n = []; var strr = str.split('').reverse().join(''); n = str.split(''); for(var i = 0;i < str.length;i++){ if(str[i] == " "){ n.splice(0,1); //一直删除第一个，一直到第一个数不为空字符串 //consol
2020-12-21 15:47:20
616
原创 js 四种方法实现封装一个函数， fn(a,n).返回的结果是s = a+aa+aaa+aaaa....的值.n是个数。
方法一：数组法function fn(a,n) { // var str = a.join(''); var arr = []; var sum = 0; for(var i = 0;i<n;i++){ for(var j = 0;j <= i;j++){ arr.push(a); } var c = parseInt(arr.join(''));
2020-12-16 16:42:38
810
原创 vue 实现购物车添加商品单向动画
html代码：<div id="app"> <button @click = "change">加入到购物车</button> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div v-show = "flag"> <img src="image/timg.
2020-12-16 09:29:09
222
原创 js 实现输入四位整数把每一位上的数字加3然后除以10的余数代替这个数字，再将第一位和第四位交换，第三位和第二位交换，输出运算后的数字
方法一：（通俗易懂）function fn (num){ var q = (parseInt(num/1000) + 3)%10; var b = (parseInt(num/100)%10 + 3)%10; var s = (parseInt(num/10)%10 + 3)%10; var g = (num % 10 + 3)%10; return `${g}${s}${b}${q}`; } var a
2020-12-15 16:28:52
582
原创 js 4种方法，求：1-1/2+1/3-1/4+1/5-1/6…1/100 的和。
方法一：最原始的方法var sum = 0;for(var i = 1;i <= 100;i++){ if(i%2 == 0){ sum -= 1/i; }else{ sum += 1/i; } }console.log(sum);方法二：最简单的方法var s = 0;var n = 1;for(var i = 1;i <= 100;i++){ s += n*1/i; n = -n;}con
2020-12-14 16:38:03
2401
原创 js 实现人员基本信息渲染到表格
html代码：<input type="text" id="uname" ><span id="name"></span><br/><input type="text" id="utel" ><span id="tel"></span><br/><input type="radio" value="男" id="man" name="sex">男<input type="radio"
2020-12-09 21:29:59
397
原创 js 2-通过循环按执行顺序，做一个5×5的二维数组，赋1到25的自然数，然后输出该数组的左下半三角。试编程。
方法一：var n = 0;var a = []; //定义一个操作数组var arr = []; //定义一个存放a的数组for(var i = 1;i <= 25;i++){a.push(i);if(i%5 == 0){ //当a数组存放了5个数据时arr.push(a);a = []; //记住此处一定一定要让a重新置空 否则会在原有的基础上继续增加}}for(var j=0;j<arr.length;j++){// consol
2020-12-08 20:41:37
775
原创 js 实现小球的环绕移动
html代码：<div id="box"> <div id="ball"></div></div>css代码：#box { border: 5px solid red; width: 1000px; height: 300px; margin: 150px auto; position: relative; } #ball {
2020-12-07 21:26:41
683
原创 定义一个含有js 实现30个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程
方法一： 通俗易懂var a = [];var ap = [];var sum = 0;var i =1;while(true){ if(i%2 == 0){ a.push(i); sum += i; if(a.length == 5){ ap.push(sum/5); a.splice(0,5); sum = 0; } } if(i&g
2020-12-07 18:49:16
1040
原创 js 实现小球碰壁弹飞效果
html代码：<div style="margin: auto;width: 1000px;"> <button id="btn1">开始运动</button> <button id="btn2">停止运动</button></div><div id="box" style="height: 500px; width: 1000px;margin: auto;border: 5px solid red;po
2020-12-07 18:40:03
186
原创 原生js实现tab栏切换
html代码：<div id="box1"> <ul id="select"> <li class="sao">扫码登录</li> <li class="qq">qq登录</li> <li class="weixin">微信登录</li> </ul> <div id="container"> <
2020-12-07 16:52:39
82
原创 js实现数字字符串千位符分隔
方法一： function fn(str){ var a = str.split('').reverse(); var a2 = []; for(var i = 0;i < a.length;i++){ a2.push(a[i]); if((i+1)%3 == 0 && (i+1) < a.length){ a2.push(",");
2020-12-04 15:05:55
476
原创 原生js 实现小人吃豆豆小游戏
html代码：<div id="count" style="text-align: center;font-size: 30px;color: blue;">你已经消灭了0个敌人</div><div style="text-align: center;margin: 20px 0;"> <button type="button" id="start_btn">开始游戏</button> <button type="butt
2020-12-04 15:03:31
771
1
原创 原生js 实现大鱼吃小鱼效果
html代码： <div id="link"> <div id="ooo" style="border-right: 30px solid #fff;border-top: 30px solid transparent;border-bottom: 30px solid transparent;"></div> </div> <div id="counter" style="font-size: 40px;">你已
2020-12-03 18:59:00
1484
6
原创 js 实现两个div碰撞改变颜色效果
html代码:<div id="link"></div><div id="gddiv"></div>css代码:#link { width: 50px; background-color: green; height: 50px; position: absolute; left: 0; top: 0;}#gddiv { width: 50px; height: 50px;
2020-12-03 18:45:32
446
原创 js 判断一个字符串是否是回文字符串
方法一: (最简单基础的方法)function fn(str){ var str1 = str.split('').reverse().join(''); var flag = true; for(var i = 0;i < str1.length;i++){ if(str1.charAt(i) == str.charAt(i)){ //此处可以直接用不等于判断代码更简洁 continue; // c
2020-12-03 14:33:50
3396
原创 js 实现鼠标拖拽小球运动
html代码<div id="link"></div>css代码#link { width: 50px; background-color: green; height: 50px; position: absolute; left: 0; top: 0;}js代码 var link = document.getElementById("link"); link.onmousedown = function(ev
2020-12-02 16:34:30
875
原创 原生js实现京东购物车效果
html代码<div class="container" id="conn" style="margin-bottom: 0;border-bottom: 1px solid transparent;"> <ul class="clearFix" style="margin-bottom: 20px;"> <li style="margin-left: 5px;width: 150px;"> <input type=
2020-12-01 19:22:32
786
原创 js 第一个下拉框选择省份，第二个下拉框显示对应的城市
html代码 <select name="" id="sel1"> <option value="">请输入省份</option> <option value="辽宁">辽宁</option> <option value="广西">广西</option> <option value="广东">广东</option> </s
2020-12-01 16:58:21
1881
原创 js 一个简单的留言demo
html代码：<div class="container"> <input type="text" placeholder="请输入您的昵称" id="inputer"> <br/> <textarea name="" id="text" cols="30" rows="10" placeholder="请输入留言内容"></textarea> <br/>
2020-11-27 15:02:13
72
原创 js 实现节点动态添加和删除与序号重建方法
直接上代码：<input type="text" placeholder="添加一个人的姓名" id="inputer"> <button type="button" id="btn">添加到table</button> <table> <tbody id="tb"> <tr> <th>序号</th>
2020-11-26 21:09:08
469
原创 js 每秒在页面随机位置生成随机颜色，大小的带有编号的小球
直接上代码：var timer = setInterval(turn,1000);var n = 0;function turn(){ var wandh = parseInt(Math.random()*20+10); var d = document.createElement("div"); //创建一个div节点 document.body.appendChild(d); //将创建的div节点添加到父元素节点中 console.log(n); d
2020-11-26 15:22:20
617
原创 js模拟购物车商品选择
废话不说直接上代码：<div> <input type="checkbox" id="ch1"></div><div> <input type="checkbox" class="ch2"> <input type="checkbox" class="ch2"> <input type="checkbox" class="ch2"> <input t
2020-11-25 19:19:40
180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人