前端 - 简忆博客

网页实现未加载完毕显示loading效果

2020-10-19 前端

当网页页面加载文件、或者图片过多是，要等很久才打开，解决方法是增加服务器配置，但是没条件的话，可以考虑通过js判断页面是否加载完毕，加载完毕后在显示内容，没加载完毕显示加载中，这种在H5邀请函中经常看见。以下是实现方法，供大家参考。loading.js判断页面是否在家完毕，未加载完毕显示loading效果var;_PageHeight;=;document.documentElement.clientHeight, ;; _PageWidth;=;document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var;_LoadingTop;=;_PageHei

Laravel封装APP接口输出

2020-10-16 前端

1868 0

APP接口输出格式三要素code;错误码msg;;错误码data;;接口返回的数据1、返回封装代码编写我们在框架下app\Http下新建一个Response目录用来放json返回封装文件ResponseJson.php<?php ; ; namespace;App\Http\Response; ; /* ;*;https://www.php.net/manual/zh/language.oop5.traits.php ;*;Trait;ResponseJson ;* ;*;*/ trait;ResponseJson { ;;;;/* ;;;;;*;当APP接口出现业务异常时的返回 ;;;;;*;@param;$code ;;;;;*;@param;$message ;;;;;*;@param;$data ;;;;;*;@return;false|string ;;;;;*;*/ ;;;;public;functi

js实现红包雨案例，如何使用js实现红包雨

2020-10-12 前端

3208 0

快到双11了，每到双11购物节，可以看到浏览器有红包雨特效，以下是一个简单实现红包雨特效的方法，供大家参考。效果演示：代码实现说明：附件demo下载：https://github.com/jyblogs/hongbao1、前端html代码<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <title>红包雨</title> <link;rel="stylesheet";href="css/style.css"> <script;src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script;src

html+js实现雪花飘落特效效果的两种方法

2020-10-11 前端

4218 0

我们经常可以看到有些网站有雪花飘落的功能，这是如何做的呢？实际上用到了HTML、js和canvas，以下是个简单的例子供大家参考。第一种效果展示：实现代码1、前端HTML代码：<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <title>Document</title> <script;src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> </head> <body> ;;;<style> ;;;;;;;;.snow{ ;;;;;;;;;;;;width:;100%; ;;;;;;;;;;;;height:;100vh;

js实现手机号码加空格或者加空格

2020-10-02 前端

2790 0

我们平时看到一些输入手机号的会出现空格或者-号的，这时怎么实现的呢？我们通过以下的方式对其进行格式化，实现3-4-4的形式。1、手机号码加空格符function;Mobile2(obj) { ;;;;;;;;var;value;=;obj; ;;;;;;;;value;=;value.replace(/\s*/g,;""); ;;;;;;;;var;result;=;[]; ;;;;;;;;for(var;i;=;0;;i;<;value.length;;i++) ;;;;;;;;{ ;;;;;;;;;;;;if;(i==3||i==7) ;;;;;;;;;;;;{ ;;;;;;;;;;;;;;;;result.push(";";+;value.charAt(i)); ;;;;;;;;;;;;} ;;;;;;;;;;;;else ;;;;;;;;;;;;{ ;;;;;;;;;;;;;;;

canvas实现文字自动换行，段落居中,单行的时候居中

2020-09-29 前端

3479 0

canvas实现文字自动换行，段落居中,单行的时候居中方法，主要用到以下方法：/****绘制自动换行的字符串****/ ;;;;//ctx_2d;;;;;;;;getContext("2d");对象;; ;;;;//lineheight;;;;段落文本行高;; ;;;;//bytelength;;;;设置单字节文字一行内的数量;; ;;;;//text;;;;;;;;;;写入画面的段落文本;; ;;;;//startleft;;;;;开始绘制文本的;x;坐标位置（相对于画布）;; ;;;;//starttop;;;;;;开始绘制文本的;y;坐标位置（相对于画布）;; ;;;;//ctx_fillStyle;;;;;;字体颜色 ;;;;//ctx_font;;;;;;字体 ;;;;//istrue;是否设置 ;;;;

百度搜索“普通收录-自动推送”功能恢复，如何使用百度自动推送？

2020-09-28 前端

3391 0

自动推送是百度搜索资源平台为提高站点新增网页发现速度推出的工具，安装自动推送JS代码的网页，在页面被访问时，页面URL将立即被推送给百度。百度搜索资源平台于2020-09-16恢复普通收录自动推送功能：尊敬的搜索合作伙伴：您好，即日起搜索资源平台恢复“普通收录-自动推送”功能，以便更快发现与收录站点新增资源，降低站点维护成本。特别提醒，自动推送仅对已关联主体的站点开放。感谢您的关注与支持！如何使用百度自动推送？将以下代码安装在网站页面中，安装完成后即可实现链接自动推送功能。<script> (function(){ ;;;;var;bp

js canvas如何实现圆角图片头像

2020-09-28 前端

3138 0

最近在做中秋国庆海报，在获取用户微信头像的时候，发现设计稿用的是圆形头像，百度找了一些，整合了自己的代码，分享给大家，供大家参考。html部分代码：<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <title>海报</title> <script;src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> </head> <body> <style> .app{;width:;100%;max-width:;750px;;height:;auto;;top:;0;;bottom:0;position:fixed;overflow-

解决session或cookie过期时Layui不跳出iframe框架问题

2020-09-22 前端

4148 0

用过layui都会遇到登录页面问题，如果是session或者cookie过期时，用户还停留在操作页面，这时后端会加判断跳到登录，而layui还是在iframe框架下打开登录页面，而我们需要的是关闭所有页面，并跳到iframe页面，这时可以通过以下代码来实现，在login.html页面加入如下js代码。<script;>; $(document).ready(function;();{;; ;;;;if;(window;!=;top);{;; ;;;;;;;;top.location.href;=;location.href;;; ;;;;};; });; </script>

jq获取li列表第几个元素值,jq获取列表元素方法

2020-09-22 前端

2718 0

假设我们有段html代码，让我我们需要获取其中的元素<ul;class="list"> ;;;;<li>列表一</li> ;;;;<li>列表二</li> ;;;;<li>列表三</li> ;;;;<li>列表四</li> ;;;;<li>列表五</li> </ul> <button;type="button";class="btn">按钮</button>jquery获取其中元素方法，需要用到eq()方法，元素从0开始1、点击按钮获取值：$('.btn').click(function(){ ;;;;var;a;=;$('.list;li').eq(0).text(); ;;

ThinkPHP6格式化时间戳，时间戳转时间

2020-09-18 前端

6201 0

ThinkPHP5和ThinkPHP6是国内比较主流的PHP框架，也是用的比较多的框架，以下是是模板对应的转换时间戳方法。ThinkPHP5时间戳转换方法：{$admin. created_at |date='Y-m-d H:i:s',###}ThinkPHP6时间戳转换方法：{$admin.created_at|date='Y-m-d H:i:s'}

百度熊掌号是否关闭了？实则不然

2020-09-11 前端

2375 0

1、什么是百度熊掌号？百度熊掌号介绍：熊掌号为百度搜索新产品，就是互联网上所有资源方或商家在百度熊掌号平台上申请的帐号，通过熊掌号，任何人都可以让自己创作的内容或服务被百度检索和推荐，从而更好的触达全网用户。熊掌号同时能帮助互联网上所有内容和服务合作伙伴实现基于内容分发和粉丝留存场景下的互动营销方式。百度熊掌号是站长、自媒体、商家入驻百度的身份账号，该账号可实现百度搜索资源服务平台、百度数据开放平台、百度百家号自媒体平台、百度用户运营平台等各类平台的一站式互通。然而熊掌号一开始受到很多人追捧，因

解决百度UEditor编辑器图片点击错位的问题

2020-09-04 前端

2913 0

百度编辑器依托百度旗下，编辑器用户体验也很好，使用人数也很多，当然也有部分bug，比如图片点击出现错位问题，解决这问题也很好解决，解决方法如下：打开 ueditor.all.min.js 或者 ueditor.all.js（看你使用的是哪个js，修改下即可），输入attachTo进行搜索查询，找到对应位置，注释掉原来的。找到这个方法：attachTo: function(a) {}//修改前 //;top:;f.y;+;e.y;-;b.editor.document.body.scrollTop;-;g.y;-;parseInt(d.style.borderTopWidth);+;"px" //修改后 'top':;iframePos.y;+;imgPos.y;-;me.editor.docume

Layui表格如何显示图片或者图标

2020-09-03 前端

4258 0

Layui如何显示图片或者图标？这个很简单,可以使用 templet 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期格式，图片地址转成图片，图标显示等。显示图片：{{ d.vod_pic }}为图片地址{field:;'article_pic',title:;'封面',width:;100,templet:'<div><img;;src="{{;d.vod_pic;}}";width="100%"></div>';},显示图标：{{ d.icon }}为图标地址;{field:;'icon',title:;'

Layui如何使用折叠表格，以及默认自动折叠

2020-09-03 前端

5941 0

我们有时在开发项目是需要用到树形接口，这时我们可以 Layui 的树形表格treetable插件。参数说明：参数类型是否必填描述treeColIndexint是树形图标显示在第几列treeSpidobject是最上级的父级idtreeIdNamestring否id字段的名称treePidNamestring否pid字段的名称treeDefaultCloseboolean否是否默认折叠treeLinkageboolean否父级展开时是否自动展开所有子级;HTML代码：<div> ;;;;<div> ;;;;;;;;<div> ;;;;;;;;;;;;<script;type="text/html";id="toolbarDemo"> ;;;;;;;;;;;;;;;;<div>

解决苹果ios手机下select标签和input标签显示问题

2020-09-01 前端

3448 0

手机端页面在苹果ios下select标签和input标签显示颜色很奇怪？而安卓上显示没问题。出现这个问题的原因：因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式input[type=datetime-local]{ ;;;;;;-webkit-appearance:none; ;;;;;;outline:none; ;;;;;;border:none; } select{ ;;;;-webkit-appearance:;none;;;/*这样select默认的样式就没有了，后面的箭头也没有了，自己找个图标添加进去就可以了*/ ;;;;padding-right:30px;;;;;/*给右边图标留位置*/ ;;;;background:;url("arrow.png");no-repeat;

html,css 如何设置input的placeholder样式

2020-08-31 前端

2726 0

html,css 如何设置input的placeholder样式，在做前端开发时，如果想写对input设置字体，文字大小，颜色等，我们该如何设置呢？通过如下设置兼容主流浏览器：-webkit-input-placeholder; ;;/* WebKit browsers */input::-moz-placeholder;;/* Mozilla Firefox 19+ */input::-ms-input-placeholder /* Internet Explorer 10+ */以下是个简单的例子，对input设置字体颜色和字体大小，如果需要其他的样式，加入即可。.rj_zyyform;input::-webkit-input-placeholder;{;/*;WebKit;browsers;*/ ;;color:;#7f7f7f; ;;font-size:;0.96rem; }

JavaScript实现console控制台显示彩色文字，版权信息方法

2020-08-26 前端

3077 0

介绍这个方法之前我们来看下百度的控制台，打开百度网页https://www.baidu.com 按下F12,选择console控制台，可以看到很有趣的百度招聘信息。再来看下大家耳熟的B站https://www.bilibili.com/其次打开博主的网站控制台：可以看到网站名称，qq等信息。看到这里是不是很有趣，我们来看看如何弄这种效果。主要用到这句代码：window.console;&&;(console.groupCollapsed("%c简忆博客",;"color:#FF6666;;font-size:;20px;;font-weight:;300"),console.groupEnd())console.groupCollapsed()方法表示折叠信息组的开始

Layui表格table关闭拖拽列宽、禁用拖拽列宽

2020-08-25 前端

6844 0

table 模块是Layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。我们在使用过程中，如果需要关闭Layui表格table拖拽列宽、禁用拖拽列宽，可以用到unresize参数：是否禁用拖拽列宽（默认：false）。默认情况

Layui table表格数据接口返回更改

2020-08-25 前端

5410 0

Layui数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为默认规定的数据格式layui.code{ ;;"code":;0, ;;"msg":;"", ;;"count":;1000, ;;"data":;[{},;{}] }很多时候，接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：{ ;;"status":;0, ;;"message":;"", ;;"total":;180, ;;"data":;{ ;;;;"item":;[{},;{}] ;;} }则可以借助

echarts生成世界地图，百度echarts生成世界地图方法

2020-08-23 前端

6977 0

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了已经内置的包含了丰富功

网页实现未加载完毕显示loading效果

Laravel封装APP接口输出

js实现红包雨案例，如何使用js实现红包雨

html+js实现雪花飘落特效效果的两种方法

js实现手机号码加空格或者加空格

canvas实现文字自动换行，段落居中,单行的时候居中

百度搜索“普通收录-自动推送”功能恢复，如何使用百度自动推送？

js canvas如何实现圆角图片头像

解决session或cookie过期时Layui不跳出iframe框架问题

jq获取li列表第几个元素值,jq获取列表元素方法

ThinkPHP6格式化时间戳，时间戳转时间

百度熊掌号是否关闭了？实则不然

解决百度UEditor编辑器图片点击错位的问题

Layui表格如何显示图片或者图标

Layui如何使用折叠表格，以及默认自动折叠

解决苹果ios手机下select标签和input标签显示问题

html,css 如何设置input的placeholder样式

JavaScript实现console控制台显示彩色文字，版权信息方法

Layui表格table关闭拖拽列宽、禁用拖拽列宽

Layui table表格数据接口返回更改

echarts生成世界地图，百度echarts生成世界地图方法

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

网页实现未加载完毕显示loading效果

Laravel封装APP接口输出

js实现红包雨案例，如何使用js实现红包雨

html+js实现雪花飘落特效效果的两种方法

js实现手机号码加空格或者加空格

canvas实现文字自动换行，段落居中,单行的时候居中

百度搜索“普通收录-自动推送”功能恢复，如何使用百度自动推送？

js canvas如何实现圆角图片头像

解决session或cookie过期时Layui不跳出iframe框架问题

jq获取li列表第几个元素值,jq获取列表元素方法

ThinkPHP6格式化时间戳，时间戳转时间

百度熊掌号是否关闭了？实则不然

解决百度UEditor编辑器图片点击错位的问题

Layui表格如何显示图片或者图标

Layui如何使用折叠表格，以及默认自动折叠

解决苹果ios手机下select标签和input标签显示问题

html,css 如何设置input的placeholder样式

JavaScript实现console控制台显示彩色文字，版权信息方法

Layui表格table关闭拖拽列宽、禁用拖拽列宽

Layui table表格数据接口返回更改

echarts生成世界地图，百度echarts生成世界地图方法

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录