javaScript
爱笑萌娃
向前奔跑的女孩,运气都不会差
展开
-
vue-cli3.x/4.x vant 移动端适配
1.安装 lib-flexible 插件 ,手淘的移动端适配方案npm i lib-flexible --save2.在main.js中引入import 'lib-flexible'安装 postcss-px2rem-exclude 插件,主要解决的是vant等第三方UI框架在750或其他尺寸设计稿样式变形问题npm i postcss-px2rem-exclude --save注意: 如果使用了 postcss-px2rem 先将改插件删除4.创建 postcss.config.js原创 2020-08-12 13:30:41 · 325 阅读 · 0 评论 -
记录一下学习笔记
函数式编程参考地址:https://mp.weixin.qq.com/s/ORgzFu9Fri4u3wLVfsr71A概念:函数式编程是一种强调以函数使用为主的软件开发风格。函数式编程的目的:是使用函数来抽象作用在数据之上的控制流和操作,从而在系统中消除副作用并减少对状态的改变。特点:声明式编程,纯函数,引用透明,不可变数据函数柯里化 :目前不是太懂CSS filter参考地址:ht...原创 2019-06-11 11:05:17 · 452 阅读 · 0 评论 -
原生js实现表格拖动选项
题目要求如下图所示,具体思路:拖动改变选择项,用的的事件是js的拖动相关事件。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...原创 2019-04-11 13:08:50 · 1213 阅读 · 0 评论 -
前端常见技术底层原理
这篇文章,只用来自己做个笔记,记录整理的一点东西,方便以后查看。原创 2019-04-11 12:52:40 · 4688 阅读 · 10 评论 -
js 实现 to do list
// js 实现 to do listhtml结构如下:<input type="text"><button id="btn"> 添加</button><div id="content"></div>js 代码如下 var arr=[]; var val=document.getElem原创 2019-03-15 16:31:35 · 1228 阅读 · 3 评论 -
vue常见项目bug整理
常见项目bug整理项目工程化vuex的使用1.在src文件下建 store文件 index.js 存放仓库数据2.在main.js中 import 导入该文件,并在vue实例中添加storeeg:import store from ‘./store’new Vue({el: ‘#app’,router,store,components: { App },template: ...原创 2018-12-29 20:33:34 · 5855 阅读 · 0 评论 -
鼠标拖拽效果
本文以拖拽div盒子为例思路分析:要实现拖拽效果,首先应该具备这三个事件 --按下、移动、抬起事件,当鼠标按下时,获取鼠标的坐标,当鼠标移动时,将鼠标的位置坐标给div,鼠标抬起时,清除移动事件具体实现://css样式<style type="text/css"> #box{ position: absolute; width: 200px; he...原创 2018-10-17 20:27:05 · 517 阅读 · 0 评论 -
DOM2级事件的兼容
主流浏览器支持的是:addEventListener(事件名,处理函数,布尔值),移除 —removeEventListener(事件名,处理函数)IE浏览器支持的是:attachEvent(事件名,处理函数),移除detachEvent(事件名,处理函数)根据这两个特性,就可以写出DOM2级添加和移除事件的兼容先补充一点基础知识://添加事件function addEvent(o...原创 2018-10-17 20:13:18 · 160 阅读 · 0 评论 -
一组内容跟着鼠标移动
下面代码主要实现,一组div跟着鼠标移动,形成队列式的跟随,样式很简单,可以自己设计,主要来说一下思路:第一个跟着鼠标动,后一个跟着前一个移动,就可以实现尾随的效果,具体来看一下js代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&am原创 2018-10-17 19:57:29 · 197 阅读 · 0 评论 -
自适应瀑布流
css修饰代码:&lt;style type="text/css"&gt; body{ padding: 0; margin: 0; } #wrap{ position: relative; } ...原创 2018-09-15 19:06:39 · 250 阅读 · 0 评论 -
cookie 购物车
数据应该是后台传来,在这我是用数组模拟的,根据数组长度生成对应的数据,代码会用到封装好的cookie,我把cookie上传到资源里了,需要的可以下 商品页代码:(这些代码是写在script标签内的)//数组中存储的数据,图片路径根据自己的修改即可var data = [{ "id":10001, "title":"蒙牛"原创 2018-09-16 18:53:40 · 514 阅读 · 0 评论 -
自动补全
思路:每次文本框输入的时候都去发送ajax请求,得到相关的数据,然后再把这些数据添加到页面中,就可以实现自动补全的效果 html结构代码:&amp;lt;input type=&quot;text&quot; name=&quot;txt&quot; id=&quot;txt&quot; /&amp;gt;&amp;lt;ul id=&原创 2018-09-16 11:55:37 · 322 阅读 · 0 评论 -
星级评价
我用的是背景图片的星星,通过改变背景定位的位置,改变星星的样式 html结构代码:&lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt;原创 2018-09-15 19:29:07 · 347 阅读 · 0 评论 -
分页
思路:利用ajax请求数据的总长度,及每页显示的条数,求出需创建总页数 具体代码如下: html结构代码:&amp;lt;ul id=&quot;list&quot;&amp;gt;&amp;lt;/ul&amp;gt;&amp;lt;ul id=&quot;btm&quot;&amp;gt; &amp;原创 2018-09-16 11:30:33 · 116 阅读 · 0 评论