web前端
关注
分享
扫一扫
web前端
笑问客从何处来
这个作者很懒，什么都没留下…
展开
-
使用encodeURI与decodeURI对json字符串进行转码和解码
使用encodeURI与decodeURI对json字符串进行转码和解码let jsonData = { "code": "0000", "msg": "请求成功", "data": [ { "title": "家网合约产品", "info": [ {原创 2022-04-28 17:31:35 · 3066 阅读 · 0 评论 -
js获取当前日期
js获取今天日期new Date(new Date()).toLocaleDateString()js获取昨天日期new Date(new Date() - 24*60*60*1000).toLocaleDateString()js获取前天日期new Date(new Date() - 24*60*60*1000*2).toLocaleDateString()…以此类推原创 2021-08-09 17:59:07 · 10205 阅读 · 0 评论 -
js数组里的对象排序
js数组里的对象排序let data=[ {id:1,name:'111111111111'}, {id:3,name:'333333333333'}, {id:2,name:'222222222222'}, {id:9,name:'999999999999'}, {id:7,name:'777777777777'} ];function sortId(a,b){ return a.id-b.id }data.sort原创 2021-06-15 15:36:55 · 360 阅读 · 1 评论 -
如何使用Promise对象
一、为什么要Promise对象的？大量的异步操作，如果要按顺序执行，通过回调函数执行的方式，就会造成回调地狱。二、 解决方法通过Promise解决回调地狱，然后形成链式调用 ，一组链式调用只需要一个catch,但多个也可以function test(){ //返回Promise return new Promise((resolve,reject)=>{ //异步处理 成功执行resolve 失败执行reject }原创 2020-12-11 17:23:29 · 410 阅读 · 0 评论 -
js路由原理实现
1. 创建一个文件夹，目录结构如下：2. 项目代码如下：router.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟路由实现</title>原创 2020-11-27 16:32:56 · 330 阅读 · 0 评论 -
css解决HTML标签内的长串数字、英文字母显示不能自动换行问题
不自动换行前效果：换行后效果：解决办法：加上下面的css word-break: break-word; //或者 word-break: break-all;原创 2020-10-26 14:45:13 · 324 阅读 · 0 评论 -
vue实现置顶
new.json 数据代码：[ {"id": "G11111","title": "手机","price": 2999}, {"id": "G22222","title": "平板电脑","price": 1999}, {"id": "G33333","title": "笔记本电脑","price": 5999}, {"id": "G44444","title": "树莓派电脑","price": 999}, {"id": "G55555","title": "超级计算机","pric原创 2020-10-15 14:14:13 · 2009 阅读 · 2 评论 -
获取url里的参数实现置顶
未置顶前效果图：置顶后的效果图：代码实现：new.json[ {"id": "G11111","title": "手机","price": 2999}, {"id": "G22222","title": "平板电脑","price": 1999}, {"id": "G33333","title": "笔记本电脑","price": 5999}, {"id": "G44444","title": "树莓派电脑","price": 999}, {"id": "G55555","t原创 2020-10-14 11:37:15 · 213 阅读 · 0 评论 -
js实现无限不间断单方向滑动
代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 800px; height: 500px; border: 1px solid #000000; position: relative; mar原创 2020-08-14 15:48:52 · 312 阅读 · 0 评论 -
html+css实现Loading动画
代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .Loading{ width: 150px; height: 150px; position: absolute;原创 2020-06-16 16:22:11 · 1066 阅读 · 0 评论 -
js中for...in和for...of的区别
for…in 语句for…in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）;遍历数组： var arr = [25,58,65,15,48,78,98,23,19]; for(let i in arr){ console.log(i) } //输出： // 0 // 1 // 2 // 3 // 4 // 5 // 6 // 7 // 8遍历结果是key,数组下标。得到了下标，也就可以遍历数组了： var arr = [25,58,6原创 2020-05-27 15:09:29 · 386 阅读 · 0 评论 -
Less入门教程
一、 什么是LessLess 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。二、 使用方法2.1 ------> Node环境的使用方法安装在服务器上安装Less的最简单方法是通过node.js软件包管理器npm进行，如下所示：$ npm install -g less命令行用法安装后，您可以从命令行调用编译器，如下所示：$ lessc styles.less这原创 2020-05-19 17:08:55 · 840 阅读 · 0 评论 -
SASS入门教程
一、什么是SASSSASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。二、安装和使用2.1 ---------->> 安装：window下面安装ruby下载地址：https://www.ruby-lang.org/en/documentation/installation/#homebrew下载rubyinstaller.exe 安装就可以了。mac下面安装ruby$ curl -L https://get.rvm.原创 2020-05-18 16:02:44 · 279 阅读 · 0 评论 -
受欢迎的前端UI框架
一、Mint UI官网地址：https://mint-ui.github.io/#!/zh-cnGithub： https://github.com/ElemeFE/mint-ui/由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库，自 开源以来，根据社区和团队内部的反馈，修复了一些 bug 并新增了部分组件。二、WeUI官网地址：https://weui.io/Github： https://github.com/weui/weui.gitWeUI 是一套同微原创 2020-05-14 17:51:41 · 428 阅读 · 0 评论 -
Css单位px，rem，em，vw，vh的区别
单位说明pxpx就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的emem是相对长度单位，相对于当前对象内文本的字体尺寸， 根据父元素的大小变化而变化remrem是相对长度单位，相对于跟元素（ 即 html 元素）font-size 的倍数， 不会被它的父元素影响vwvw是相对视口（viewport）...原创 2020-05-06 15:22:49 · 286 阅读 · 0 评论 -
雪花飘落动画
雪花飘落动画，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: b...原创 2020-04-10 16:57:26 · 277 阅读 · 0 评论 -
flex布局设置最后一行居左对齐
用margin属性隔开，话不多说，请看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ paddin...原创 2020-03-26 14:17:11 · 1452 阅读 · 0 评论 -
css如何设置滚动条样式
话不多说，请看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>设置滚动条样式</title> <style> html{ height: 5000p...原创 2020-03-26 14:04:20 · 661 阅读 · 0 评论 -
js实现随机抽奖
1.话不多说，直接上代码了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>随机抽奖</title> <...原创 2020-01-10 10:31:17 · 1502 阅读 · 2 评论 -
css+js实现3D盒子
话不多说，直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>css3D盒子</title> &...原创 2019-11-30 14:34:43 · 636 阅读 · 0 评论 -
3D旋转木马相册
话不多说，直接上代码了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: b...原创 2019-11-29 18:05:33 · 618 阅读 · 0 评论 -
js如何实现无限无缝轮播？
首选，我说一下我实现的思路，如下图所示：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ wi...原创 2019-11-13 16:18:10 · 1063 阅读 · 2 评论 -
css控制文字超出宽度范围以省略号显示
一、单行文本显示不完时出现省略号代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ width: 300...原创 2019-10-28 16:56:07 · 418 阅读 · 0 评论 -
js实现简单选项卡
js实现简单选项卡直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title></head><style> .box{ width:600px...原创 2019-10-24 18:23:06 · 321 阅读 · 0 评论 -
如何去除移动端浏览器滚动条？
话不多说，直接上代码，例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px...原创 2019-09-25 14:16:30 · 2767 阅读 · 1 评论 -
如何获取对象的长度？
1.我们知道，字符串（string）、数组（array）的长度可以直接用.length来获取，但对象的长度不能用.length获取，用js原生的Object.keys可以获取到，例：var kfc = { ip:11233566, ki:6899, vip:"king", ctf:"kill", "home":"he...原创 2019-09-25 17:09:42 · 3557 阅读 · 0 评论 -
如何用div实现炫酷3D球体？
话不多说，直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D球体</title> <style> html{ background: bla...原创 2019-09-29 16:47:53 · 1259 阅读 · 0 评论