panliyou-CSDN博客

原创使用css制作动态时钟详细教程

使用css制作动态时钟完成效果：步骤一：创建一个宽高为300px圆形时钟的外表盘，边框加上阴影更好看一点，页面背景色为黑色代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl

2021-02-12 17:17:12 5701 4

原创 jq实现搜索功能，保存最新的十条搜索历史记录

jq实现搜索功能，保存最新的十条搜索历史记录步骤：1.用户点击搜索按钮百度一下获取用户输入的值数据安全处理判断用户输入是否为空为空则不做处理获取存储在localhost的历史记录为数组如果没有则第一次存储给他一个空数组如果有值则取出来，判断用户输入的值是否已经存在如果存在则把之前的干掉从新添加到数组的前面判断数组里面是否超过十条记录，超过则干掉最后一条2.输入框的处理样式改变就不作说明了，主要是js逻辑如果输入框有焦点则显示历史记录，如果历史记录为空则不管点击其它地方输入框

2021-02-10 20:20:06 1359

原创 less计算中除法不生效的问题

less计算中除法不生效的问题less中做算术运算的时候一般加法+，减法-，乘法*可以直接写基本不会出现什么问题但是除法/需要（）括起来，不然会认为你的是有两个值值一 / 值二，不会进行计算返回计算结果例如：less文件css文件...

2021-01-31 10:56:50 4183 8

原创 uni-app开发小程序使用@escook/request-miniprogram配置网络请求

1.因为小程序中无法使用axios，而wx.request功能过于简单，所以下载加强版网络请求包：npm init -y 在项目根目录初始化package.json文件npm i @escook/request-miniprogram -S 下载网络请求包2.打开main.js入口文件import { $http } from '@escook/request-miniprogram'//从网络请求包中引入$http请求对象uni.$http = $http//因为在其他的页面或组件中也

2021-04-11 19:23:40 31102 10

原创 axios的简易封装

1.axios的简易封装安装： npm install axios引入：import axios from ‘axios’// 简易封装axios// 引入axiosimport axios from 'axios'import { Toast } from 'vant';// 使用axios.create()实现封装// axios.defaults axios.create({// baseURL:'http://157.122.54.189:9083'// })// 使

2021-04-11 19:21:26 4196

原创 js实现手风琴效果

js实现手风琴效果完成的效果：这里需要用到上一篇文章里封装好的缓动动画https://blog.csdn.net/weixin_39411655/article/details/113914024.

2021-03-29 19:07:33 4780

原创 jq选择器和过滤器总结

jq选择器和过滤器总结jq选择器：基础选择器Id选择器：语法 $(’#id名’)类选择器：语法 $(’.类名’)标签选择器：语法 $(‘标签名’)选择所有html元素：语法$("*")同时选择多个html元素：语法$(“selector1,selector2…,selectorN”)jq选择器：层次选择器祖先后代选择器：语法 $(‘祖先后代’)父子选择器：语法 $(‘父亲>儿子’)兄弟选择器：语法：$(‘目标’).siblings()jq过滤器：基本过滤器匹配目标的第一个元素

2021-03-29 18:56:45 4177

原创 web前端面试必问之this的指向问题 this与函数的四种调用模式

this与函数的四种调用模式根据函数内部this的指向不同，可以将函数的调用模式分成4种函数调用模式方法调用模式构造函数调用模式上下文调用模式（借用方法模式）1.函数调用模式如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了windowfunction fn(){ console.log(this);// 指向window }fn();2.方法调用模式当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定

2021-03-29 18:55:09 326

原创 js实现封装一个缓动动画，应用于各种动画效果

js实现封装一个缓动动画，应用于各种动画效果先封装一个缓动动画的效果，先快后慢的效果，这样的话可以应用到一些用到缓动动画的案例，如手风琴，轮播图等等。下一节讲解利用这个封装好的动画制作手风琴效果。封装好的代码：/** * * 元素动画效果 * @param {element} ele，一个元素 * @param {number} target ，移动的目标 * @param {string} style，要实现的效果属性（css） * @param {function} fn，回调函数，

2021-02-21 10:53:38 412

原创 jq两行代码实现tab栏切换

jq两行代码实现tab栏切换主要思想：排它思想所有元素全部清除样式(干掉其他人) 给当前元素设置样式(留下我自己)完成效果如下：html主要结构，添加了一个current类为当前的tab切换栏和内容栏，tab切换栏和内容栏结构大致相同，开始内容栏全部为隐藏只显示有current类的内容栏 <div class="hd"> <span>tab1</span> <span class="current">

2021-02-20 20:39:33 371

原创如何在地址栏上传参和获取地址栏上的参数

如何在地址栏上传参和获取地址栏上的参数浏览器自带的URLSearchParams可以把对象转换成查询参数如地址栏上的参数为http://www.baidu.com?id=1&title=222?号后面的为查询参数，参数的形式为参数名=参数值，多个参数用&符号连接const data = { aa: 11, bb: 22 }new一个URLSearchParams把需要转为参数的对象传进去即可const data2 = new URLSearchParams(data)用加号

2021-02-13 10:41:29 629

原创 web前端面试-求数组中出现次数最多的元素

web前端面试-求数组中出现次数最多的元素示例：let str = [‘a’, ‘b’, ‘a’, ‘s’, ‘f’, ‘g’, ‘g’, ‘g’, ‘h’, ‘j’, ‘j’, ‘k’, ‘k’, ‘g’, ‘f’, ‘d’, ‘d’, ‘s’, ‘s’, ‘s’, ‘s’, ‘s’, ‘3’, ‘4’, ‘4’, ‘4’, ‘3’, ‘4’, ‘3’];思路分析：对象+擂台思想想办法把数组中的所有元素变成新的样子对象：{a:3,b:2,s:6…}通过对象遍历再用擂主思想找出最大值即可1.定义一

2021-02-12 18:04:06 846 4

原创使用flexble配合rem实现移动端自适应

使用flexble配合rem实现移动端自适应flexble 下载地址：https://download.csdn.net/download/weixin_39411655/15206974.引入flexble js文件对于小于320px和大于750px屏幕应该不再随着屏幕的改变而改变代码： @media screen and (min-width: 750px) { html { font-size: 75px !important;

2021-02-11 22:34:54 326

原创 jq的分页插件paginator的使用方法

jq的分页插件paginator的使用方法资料下载地址：[https://download.csdn.net/download/weixin_39411655/15204488]实现步骤1.引入分页插件的css：jquery.pagination.css2.引入入jq插件js:jquery-1.12.4.min.js3.引入分页插件的js:jquery.pagination.min.js效果图：代码：<!DOCTYPE html><html lang="en">

2021-02-11 18:11:29 442 1

原创初学JQ使用一些动画效果时常常会忘记stop()的重要性

初学JQ使用一些动画效果时常常会忘记stop()的重要性如下图就是jq执行动画没有加stop(),每次移入移出系统都记住了，当你快速移入移出的时候你鼠标此时虽然是移出了，但是这个动画还没有执行完次数所以就会出现这种情况，stop()是清除之前的动画，执行最后一次动画。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewp

2021-02-10 15:17:21 129

原创前端面试必问之闭包

前端面试必问之闭包什么是闭包？闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。为什么有闭包的存在？闭包的作用？局部变量无法共享和长久的保存，而全局变量可能造成变量污染，造成数据的不安全所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染保证数据的安全闭包的缺点？占用更多内存，不容易被释放内部函数占用了外部函数的局部变量，同时内

2021-02-06 18:22:57 353

原创 VS-code常用的快捷键

VS-code常用的快捷键快捷键ctrl+k + ctrl+s 查看VS-code的全部快捷键快速生成相同的标签：标签名+星号+数字看到提示回车即可快速生成相同的标签和标签里面的内容（数字自增）：标签名+星号+数字+花括号{} + 美元符号$ 看到提示回车即可多行快速变成一行：1.选中上一行后面的空格和下一行前面的空格2. ctrl + d 选中相同的内容3. 最后按空格即可快速使内容变成一行：ctrl + j注释：行注释：快捷键ctrl + /块注释：快捷键ctrl +

2021-02-06 15:57:33 246

原创 jq制作樱花飘落特效

jq制作樱花飘落特效今天看到一些网站有樱花飘落，雨滴，流星，孔明灯等在整个页面飘动的特效，经过查询资料自己也做了一个，分享给大家整体用到了jq 1.12.4版本的插件和jq的transit插件思路：1.创建一个樱花的元素即为樱花图片2.产生的樱花图片不止一个应该为随机一张图片3.控制这个樱花的运动轨迹，即樱花开始飘落位置和结束位置也是随机的4.设置一个定时器每个一段时间调用这个樱花飘落的函数<!DOCTYPE html><html lang="en"><h

2021-01-18 22:44:26 5204 1

原创文本溢出隐藏变成省略号

文本溢出隐藏变成省略号1.单行文本溢出隐藏变成省略号1.文本不换行强制文本在一样显示white-space: nowrap;2.溢出隐藏overflow: hidden;3.文字溢出部分变成省略号…text-overflow: ellipsis;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont

2021-01-18 20:36:53 1103

原创元素显示与隐藏的几种方式

元素显示与隐藏的几种方式1.display:none;（常用）元素隐藏且在文档中部不占位置，不会影响其它结构transition（过渡），没有过渡效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2021-01-18 20:02:52 638 1

原创清除浮动的几种方式

清除浮动的几种方式浮动：浮动元素在文档中不占位置脱离标准流，所以它在页面中没有高度，标准流的元素会占据浮动元素的原来位置导致浮动元素盖住标准流元素，但很多时候也要用到浮动所以需要清除浮动带来的影响。1.给浮动元素的父元素添加伪元素清除浮动带来的影响（推荐）原理：浮动元素的前后添加了伪元素并转为了块级元素加上clear: both;清除左右两侧的浮动.<!DOCTYPE html><html lang="en"><head> <meta char

2021-01-18 18:33:28 177

原创 pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局

pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局1分栏布局: float2 通栏布局: 在页面中不设置宽度，让默认宽度和浏览器等宽的布局3.版心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-

2021-01-17 20:25:55 4693 1

原创实现圣杯布局（双飞翼布局）的几种方式

实现圣杯布局（双飞翼布局）的几种方式圣杯布局：左右两边盒子的宽度固定不会随着屏幕大小的改变而改变，中间盒子宽度自适应1.使用定位的方式让左右两边的盒子绝对定位，左边盒子left:0,右边盒子：right:0,绝对定位盒子不占位置，中间的盒子padding左右宽度为左右两边盒子的宽度保留左右盒子的位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me

2021-01-17 19:50:21 1070 1

原创使元素水平垂直居中的几种方式

使元素水平垂直居中的几种方式1.居中元素有具体宽高的情况通过绝对定位用居中元素的外边距使自己居中<!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-Co

2021-01-16 14:13:24 120 1

转载应聘web前端开发面试时问到的基础问题

由于我是第一次面试web前端开发，面试之前也没做很多准备非常紧张，面试时间是早上11点，我提前半个小时来到了这里，HR叫我去填了一下表，填完表就倒杯水让我在这里休息一下，并没有问我什么问题，过了一会有个秃顶的中年大叔走过来，我猜这肯定是这里的IT高管，经理之类的，毕竟我们IT界大多数大神是没多少头发的言论一直流传下来，他首先叫我自我介绍一下让他有空去看我的简历，自我介绍完就直接问我问题了。一.h...

2019-07-20 18:27:11 1307