前端
关注
分享
扫一扫
这个杀手好冷
这个作者很懒，什么都没留下…
展开
-
h5 rem换算px
(4 *window.innerWidth / 750) * 1004 代表 rem的实际大小原创 2022-04-28 16:52:43 · 330 阅读 · 0 评论 -
pc端区域表鼠标长按滚动
<!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&...原创 2021-12-28 09:08:22 · 177 阅读 · 0 评论 -
nuxt 引入百度分享
<divclass="bdsharebuttonboxbdshare-button-style1-24"><aclass="bds_more"href="#"tangram_guid="TANGRAM_16"data-cmd="more"></a><aclass="bds_qzone"title="分享到QQ空间"href="#"data-cmd="qzone"></a>...原创 2020-09-11 10:48:57 · 367 阅读 · 0 评论 -
css3实现瀑布流
html<div class="box-wrapper"> <div style="margin-top:0px" class="box"></div> <div class="box spe"></div> <div class="box spe"></div> <div class="box spe"></div> <div class="box原创 2020-06-17 09:40:58 · 409 阅读 · 0 评论 -
前端websocket使用教程（聊天功能）
<!DOCTYPE html><html><head> <title>Java后端WebSocket的Tomcat实现</title> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /> <meta http-equiv="Con...原创 2020-06-05 15:17:44 · 1481 阅读 · 0 评论 -
css向上滚动跑马灯
<div class="in_scro"> <div class="in_scrview">林先生130****2212已申请免费量房</div> <div class="in_scrview">谢先生130****2342已申请免费量房</div> <div class="in_scrview">周先生130****...原创 2020-03-24 14:50:56 · 1506 阅读 · 0 评论 -
input限制只能输入数字还有小数点
var str = num; var len1 = str.substr(0, 1); var len2 = str.substr(1, 1); //如果第一位是0，第二位不是点，就用数字把点替换掉 if (str.length > 1 && len1 == 0 && len2 != ".") { ...原创 2020-03-20 17:22:00 · 207 阅读 · 0 评论 -
js 图片base64转file文件的两种方式
最近项目中需要实现把图片的base64编码转成file文件的功能，然后再上传至服务器。起初是直接通过new File()的方式进行转换，在各个主流的浏览器基本上都支持，Android也没问题，但是在ios系统埋了个坑，ios11.4以下的系统上传失败。定位bug发现是new File()这个方法不兼容ios系统，只能另辟蹊径，最后找到一个方法就是：...原创 2019-11-15 11:41:23 · 695 阅读 · 0 评论 -
前端开发学习常用网站网址及介绍
MDN开发者文档：https://developer.mozilla.org/zh-CN/ 菜鸟教程：https://www.runoob.com/ W3CSchool：http://www.w3school.com.cn/ JavaScript教程网：https://zh.javascript.info/ 一行代码搞定bug监控：https://www.fundebug.com/?tds...原创 2019-11-19 09:07:48 · 2768 阅读 · 0 评论 -
input 上传的图片文件，转换base64
<input type="file" class="fileImage" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadlicense($event,2)">uploadlicense(e, num){var reader = new FileRead...原创 2019-11-13 15:05:50 · 578 阅读 · 0 评论 -
vue配置本地，测试，生产环境api
最近在做vue项目，想实现通过不同的命令，调用不同环境的api，防止来回切换不同的api出错。例如: npm run dev 调用本地环境 npm run test 调用阿里测试环境api npm run build 调用 生产环境api先简单说一下创建vue项目的流程:1. npm install -g vue-cli 全局安装脚手架（只安装一...原创 2019-11-08 16:29:27 · 507 阅读 · 0 评论 -
滚动条返回顶部动画效果
在点击返回顶部 按钮函数里面输入下面这段代码即可实现FunbackTop() { //返回顶部 var scrollToptimer = setInterval(function () { var top = document.body.scrollTop || document.documentElement.scrollTop; ...原创 2019-11-05 09:31:34 · 444 阅读 · 0 评论 -
原生js监听滚动条滚动到底部
created(){ window.onscroll = function(){ //变量scrollTop是滚动条滚动时，距离顶部的距离 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //变量windowHeight是可视区的高度 var win...原创 2019-10-30 17:22:58 · 3288 阅读 · 0 评论 -
js秒数转化为时分秒
var t1 = setInterval(function(){ payTime =_self.payTime--; var intervalNextTime=payTime; //转为时分秒 var h,m,s; h = Math.floor(intervalNextTime/60/60%24); ...原创 2019-03-12 16:53:44 · 176 阅读 · 0 评论 -
解决H5在微信浏览器中保存联系人问题
利用QRCode.js 生成二维码。 可离线生成，主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库效果图上代码！！！！<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; char...原创 2018-11-13 16:14:40 · 3895 阅读 · 3 评论 -
利用Clipboard.js解决ios手机浏览器无法实现网页内容复制
解决移动端IOS无法复制复制文字的问题！需要用到的是clipboard这个js文件官方下载地址：https://clipboardjs.com/第一步引入clipboardjs.js文件HTML代码要给元素添加一个class类名 js要获取元素用到<button class="btn" :data-clipboard-text="复制想到的内容">复制<...原创 2018-11-12 16:18:15 · 6128 阅读 · 0 评论 -
关于Html class id 命名规范
CSS命名规则 头：header 内容：content/containe 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：...原创 2018-11-15 09:27:54 · 9734 阅读 · 2 评论 -
ios 上浏览器返回上一页不会刷新页面问题
方法1. 利用 onpageshow 事件触发： var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/; if (browserRule.test(navigator.userAgent)) { window.onpageshow = function(event) { if (event....原创 2018-11-21 15:12:30 · 2371 阅读 · 0 评论 -
自定义 border 设置 dashed 时的虚线间距
width: 100%;height: 1px;background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);background-size: 8px 1px;background-repeat: repeat-x;QQ交流群：260548659原创 2018-11-30 15:47:36 · 18633 阅读 · 0 评论 -
移动端滑动导航条
HTML<div class="tab"> <div class="table-item"> <p>二维码</p> <p>10</p> </div> <div class="table-item"&am原创 2018-12-13 11:12:43 · 493 阅读 · 0 评论 -
后台获取的时间进行时分秒倒计时
<html lang="en"><head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> <!--<script src="js/dayClickIn/dayClockIn.js">&am原创 2018-12-13 11:14:45 · 1827 阅读 · 0 评论 -
阻止网页操作完成后的页面自动跳转
$(window).on('beforeunload', () => { console.log('leave'); return false; });浏览器中按F12控制台输入上面一段代码 原生window.onbeforeunload = function() { return "\n确定离开当前页吗？";} ...原创 2018-12-14 11:49:49 · 6471 阅读 · 0 评论 -
AJAX防重复提交的办法总结
最近的维护公司的一个代理商平台的时候，客服人员一直反映说的统计信息的时候有重复数据，平台一直都很正常，这个功能是最近新进的一个实习生同事写的功能，然后就排查问题人所在，发现新的这个模块的AJAX提交数据的时候没有设置防重复提交限制，所以今天把这个问题记录下来供AJAX新手童鞋学习，也防止以后再出现这样的问题。ajax诠释ajax 的全称是Asynchronous JavaScript an...转载 2019-01-10 14:20:26 · 257 阅读 · 0 评论 -
CSS选择第奇数或偶数的元素
:nth-of-type(odd){} 奇数行 :nth-of-type(even){} 偶数行原创 2019-02-25 17:45:37 · 9208 阅读 · 0 评论 -
vue滚动分页加载数据
<div class="content" ref="scrollContainer" @scroll="LoadMore()"> <ul ref="tabContent"> <li class="list-item" v-for='item in ShareList'> </li> </ul></di...原创 2019-11-18 17:45:00 · 522 阅读 · 0 评论 -
H5上传图片压缩
解决一些图片上传服务器转base64过大的问题用到技术canvasHTML代码<input id="file" type="file">js代码 <script type="text/javascript"> var eleFile = document.querySelector('#file'); // 压缩图片需要的一些元素和对象...原创 2018-11-09 14:13:31 · 1925 阅读 · 0 评论