- 博客(42)
- 收藏
- 关注
RSS订阅原创 中午不知道吃啥子？今天来写一个随机菜谱
前言大家好，我是_Peach，一名刚入行的前端，今天无聊写了个小东西，记录下项目体验点击循环菜谱 再次点击会暂停 哈哈哈哈哈！样式有点丑 功能还是有的功能实现思路首先先定义一个菜谱数组，这里使用的主要方法是以下几点Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。Math.floor() .
2021-09-27 16:37:57
4272
原创 SassError: Mixin “xxxx“ does not accept a content block
今天遇到了一个报错，经过排查，是我写scss的错误本人写的错误方式正确方式应该通过@include position();调用最后希望大家编写代码的时候注意细节，不要再犯同样的错误
2021-09-24 14:34:46
551
原创 动态生成element的表单（用户输入的input）
前端界面先获取用户输入的input添加成一个对象const defaultData = { cjw_c_bh: “”, //编号}添加点击事件<script>import common from "@/components/deprecated/mixin/common.js";const defaultData = { cjw_c_bh: "", //编号 cjw_c_xm: "", //姓名 cjw_c_xb: "", //性别 cjw_c_bm: "", //.
2021-07-24 16:22:58
339
原创 Vue的过滤器
在main定义返回值是金额加符号Vue.filter("RMBformat", val => { return "￥" + val + "元"})使用<div class="price">{{ item.retail_price | RMBformat }}</div>阻止启动生产消息，常用作指令Vue.config.productionTip = false...
2021-06-12 13:50:59
98
原创 (小技巧)快速修改某个数组中一个或多个对象的属性名
先进行深拷贝，再做替换：JSON.parse(JSON.stringify(data).replace(/name1/g, 'new_name1').replace(/name2/g, 'new_name2').replace(/name3/g, 'new_name3')...)replace可以重复链式编程，name1表示旧属性名，new_name表示新属性名
2021-06-02 13:37:53
476
原创 vue的过渡动画
在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。v-leav
2021-05-22 22:12:31
372
原创 关于重复点击用一个路由出现的报错问题解决
关于重复点击用一个路由出现的报错问题解决在新版本的vue-router中，重复点击同一个路由会出现一下报错解决方案如下、直接修改原型方法push(推荐)// 把这段代码直接粘贴到router/index.js中的Vue.use(VueRouter)之前const originalPush = VueRouter.prototype.push;VueRouter.prototype.push = function(location) { return originalPush.call(thi
2021-05-22 17:33:18
185
原创 axios的网络请求，拦截器，以及api的抽取
首先安装axios及引用npm install axiosimport axios from “axios”通过生命周期的created,在实例创建完成后被立即调用created(){}建立生命周期函数 发送get请求 created(){ axios.get("http://kumanxuan1.f3322.net:8001/index/index") .then( res => { //请求成功 打印 res.data数据 console.log(res
2021-05-21 19:05:13
296
原创 左侧导航栏tab
<!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>Do
2021-04-24 20:56:24
546
转载 Tabbar组件封装
TabBar实现思路1.如果在下方有一个单独的TabBar组件，你如何封装自定义TabBar组件，在APP中使用让TabBar出于底部，并且设置相关的样式2.TabBar中显示的内容由外界决定定义插槽flex布局平分TabBar3.自定义TabBarItem，可以传入 图片和文字定义TabBarItem，并且定义两个插槽：图片、文字。给两个插槽外层包装div，用于设置样式。填充插槽，实现底部TabBar的效果4.传入 高亮图片定义另外一个插槽，插入active-icon的数据定义
2021-04-23 11:42:10
472
转载 Webpack的基本使用
命令行webpack ./src/main.js ./dist/bundle.js导入规范//使用commonjs的模块化规范const { add, mul } = require('./mathUtils.js');console.log(add(20, 30));console.log(mul(20, 30));// 使用ES6的模块化规范import { name, age, height } from "./info";console.log(name);console.
2021-04-06 12:13:37
101
转载 Vue中的购物车案例
1，先遍历数组books2，添加按钮点击事件3，添加移除操作4，计算总价格<!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, i
2021-03-27 22:50:59
118
转载 Vue中的排他思想案例
<!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"> <title>Do
2021-03-24 20:38:54
2115
1
转载 vue中的 v-bind动态绑定class对象语法
v-bind简写是:v-on简写是@<!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">
2021-03-24 13:31:54
114
转载 vue计数器
<div id="app"> <h2>当前计数：{{counter}}</h2> <!-- <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> --> <button v-on:click="add">+</butto
2021-03-23 16:17:14
64
原创 浅拷贝与深拷贝
1，浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用2，深拷贝拷贝多层，每一级别的数据都会拷贝浅拷贝案例var obj = { id: 1, name: 'andy', mas: { age: 18 } } var o = {} for (var k in obj) { //k 是属性名 obj[k]属性
2021-03-17 12:55:04
60
原创 js递归
1，什么是递归如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数递归函数的作用和循环效果一样由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return。 // 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n function fn(n) { if (n == 1) { return 1;
2021-03-17 11:01:27
99
原创 闭包案例-点击li获取对应的索引号
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> //获取元素 var lis = document.querySelector('ul').querySelectorAll('l...
2021-03-15 22:30:43
154
原创 闭包案例-计算打车价格
简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量 闭包的形成，就是在一个函数中返回一个子函数，在子函数中使用父函数的变量，在全局中调用子函数。 // 闭包应用-计算打车价格 // 打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格 // 如果有拥堵情况,总价格多收取10块钱拥堵费 var car = (function() { var start = 13;
2021-03-15 21:37:11
450
原创 改变函数内部 this 指向
JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题，常用的有 bind()、 call()、apply() 三种方法。call() 方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。 var o = { name: 'andy' } function fn(a, b) { console.log(this);
2021-03-15 13:33:11
100
原创 js商品查询案例
实现方法先搭建基本html机构利用新增数组方法操作数据获取元素生成tr td 渲染数据这里用到了forEach，filter，some数组方法forEach 迭代(遍历) 数组filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组 ，注意它直接返回一个新数组some() 方法用于检测数组中的元素是否满足指定条件. 通俗点 查找数组中是否有满足条件的元素 ，它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到
2021-03-13 22:17:00
720
原创 jq手风琴案例
<!doctype html><html><head> <meta charset="utf-8"> <title>手风琴案例</title> <style type="text/css"> * { margin: 0; padding: 0; } img {
2021-03-04 21:40:35
171
1
原创 记住用户名案例
//先获取元素 var username = document.querySelector('#username'); var remember = document.querySelector('#remember'); //判断是否有存储到usename值 if (localStorage.getItem('username')) { //如果有就把值传给 username.value; .
2021-03-03 22:09:40
208
1
原创 移动端轮播图
1，先获取盒子 ul ol元素2，index= 0初始化3，开启定时器 index++;3,translateX = -index * 盒子的宽度4，过渡完成 循环图片 小圆点 跟随变化 先移除classList.remove(‘current’);再添加ol.children[index].classList.add(‘current’);5，因为是横的所以计算X坐标 计算移动距离原来的位置+手指的移动距离6，手指离开 根据移动距离是判断还是回弹播放 并重新开启定时器window.addE
2021-03-02 18:43:52
162
原创 移动端拖动元素
1，先获取当前手机触摸到的坐标值2，拖动原理 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离3，手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置 var div = document.querySelector('div'); var startX = 0; //获取手指触摸初始坐标 var startY = 0; var x = 0; //获得盒子原来的位置 var y =
2021-03-01 19:56:14
133
1
原创 js 轮播图
js轮播图实现思路1，先获取元素 盒子 左右按钮2，鼠标经过 显示/隐藏 左右侧按钮3，动态生成小圆圈、 添加自定义属性4，小圆圈点击事件 添加current类名5，添加动画事件 animate 等于 -索引号*focusWidth6，克隆第一张图片到最后面7，添加右侧/左侧按钮点击事件8，设置定时器 手动调用右侧按钮点击事件html代码部分<!DOCTYPE html><html lang="en"><head> <meta ch
2021-02-28 18:34:28
147
1
原创 js 动画函数
调用方法：animate(obj, target, callback)；animate(对象, 目标值, function() {alert(‘hell world’);});function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterv
2021-02-23 17:30:47
513
原创 缓动动画原理
缓动动画函数封装obj目标对象 target 目标位置思路：1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器function animate(obj, target) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); ob
2021-02-20 21:51:32
88
原创 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"> <title>Do
2021-02-20 10:32:51
97
原创 js 拖拽原理
1，首先box盒子要绝对定位2，算出鼠标离box盒子的位置3，最后赋值left和top值<!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-wi
2021-02-15 22:23:29
158
原创 js 禁用右键菜单，禁止选中文字
<script> // 1. contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) // 2. 禁止选中文字 selectstart document.addEventListener('selectstart', ...
2021-02-12 20:37:59
115
原创 js 下拉菜单
js中下拉菜单案例html结构部分<!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-02-11 13:23:34
105
1
原创 Tag栏切换
**<!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"> <title>
2021-02-08 17:55:58
399
原创 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"> <title>Do
2021-02-08 09:16:23
86
原创 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"> <title>Do
2021-02-06 17:06:43
266
原创 js中的input 显示与隐藏
<!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>Do
2021-02-06 14:10:19
3906
2
原创 查找字符串中某个字符出现的次数
var str = "abcoefoxyozzopp"; //声明字符串 var index = str.indexOf('o'); // o 出现的索引号 var num = 0; //计数器 while (index !== -1) { //index 不等于 -1 执行以下操作 console.log(index);//打印索引号 num++; //次数 ind.
2021-02-03 14:31:59
2764
1
原创 js日期对象-时间戳
// 倒计时效果 // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。 // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。 // 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒） // 转换公式如下： // d = parseInt(总秒数/ 60/60 /24);
2021-01-27 23:10:39
148
原创 js基础格式化日期
格式化日期 年月日 // 格式化日期 年月日 var date = new Date(); console.log(date.getFullYear()); // 返回当前日期的年 2019 console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦 console.log(date.getDate()); // 返回的是 几号 console.log(da
2021-01-27 22:08:08
92
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人