微信、qq网页二次分享
摘要：二次分享是指，在APP或者浏览器分享到微信或者qq，然后从微信或者qq再分享到别的平台。如果不处理，再次分享出去的图片或者标题就不会显示，对用户非常不友好。 一、微信二次分享 官方接入文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp
阅读全文
posted @ 2019-11-14 21:10
随笔分类 - HTML
关于网页制作
锚点定位向下偏移
摘要：正常写一个锚点定位的元素，点击锚点元素，默认是到页面的顶部，但是如果顶部有fixed定位，就会被遮住，这时就希望锚点区域距离上面有一个距离。 因此就需要使用css或者js来让锚点定位向下偏移。 方法一、 使用 margin-top 和 padding-top 来解决。 利用padding 将定位向下
阅读全文
posted @ 2019-06-26 10:13
css实现文字渐变
摘要：css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。 实现文件渐变的方法有两种 1. 使用 background 的属性 2. 使用 mask 属性 方式一、 效果如下 代码也是非常简单： background: liner-gradient(to right, red,
阅读全文
posted @ 2019-06-20 18:43
css多行省略
摘要：单行省略就不用说了，用css实现非常简单，兼容性还非常好。但是多行省略一直都是前端的痛点，在css3之前，可以用js去算两行能放多少个字，把多余的字用 。。。 代替，且不说好不好，万一哪天PM说要改成3行，UI说这个字体改大一点，又得去算一遍，可谓是苦不堪言。 好在有css3，css3提供了实现完美
阅读全文
posted @ 2019-04-28 16:25
mailto链接
摘要：mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息，但是需要你电脑安装默认的E-mail软件，类似Microsoft Outlook等，那么点击mailto链接就可以获得默认设置的邮件信息 使用： mailto链接一般写在a标签的href中，也可以用location.href或者
阅读全文
posted @ 2018-10-18 09:53
如何用原生js开发一个Chrome扩展程序
摘要：原文地址：How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单，只需要使用原生的js就可以完成，在本文中，我将在几分钟内引导你完成一个简单的扩展程序 关于Chrome扩展程序 Chrome 扩展
阅读全文
posted @ 2018-09-13 10:47
Vue 表单校验 vee-validate
摘要：gitHub 地址：https://github.com/baianat/vee-validate 官网API 地址：https://baianat.github.io/vee-validate/api/ 配置 先下载到项目 npm install vee-validate --save 封装一个自
阅读全文
posted @ 2018-08-25 16:32
CSS背景渐变支持transition过渡效果
摘要：background-image 是不支持 CSS3 的transition过渡效果的，而CSS3 gradient 渐变作为背景图片存在的时候， 下面的CSS不会有过渡效果 当鼠标hover划过的时候，会发现变化很唐突，一点过渡效果都没有，你可以 点击这里查看 那么，如果我们希望实现当hover的
阅读全文
posted @ 2018-08-22 10:52
突破本地离线存储的JS库 localforage
摘要：localforage 简介 项目地址 https://github.com/localForage/localForage API中文地址 https://localforage.docschina.org/ 说到本地存储我们首先想到的就是localStorage存储, 也有很多人用过, 但是lo
阅读全文
posted @ 2018-08-13 19:12
深入理解 content 计数器
摘要：计数器可以说是content的重点, 因为此功能非常强大, 实用, 并且不具有可替代性, 甚至可以实现连JavaScript都不好实现的效果. 所谓css计数器效果, 就是使用CSS代码实现随元素的数目增多, 数值也跟着变大的效果, 有点类似于<ol>, 但是比ol更灵活 CSS计数器有两个属性 (
阅读全文
posted @ 2018-07-05 15:17
记一次组内分享080517
摘要：1. JavaScript 原型链 2. Pandora.js node.js内部模块 http://www.midwayjs.org/pandora/en/ 3. ES6的class http://es6.ruanyifeng.com/#docs/class-extends#super-%E5%8
阅读全文
posted @ 2018-05-18 08:52
Chrome 66 禁止声音自动播放
摘要：声音无法自动播放一直在IOS/Android上面都是一个惯例, 桌面端的 Safari在2017年的11版本中也宣布禁止带有声音的多媒体自动播放, 紧接着2018年4月份Chrome发布的66版本也正式关闭了声音自动播放, 也就是 <audio autoplay></audio> <video au
阅读全文
posted @ 2018-05-17 09:52
storage 事件监听
摘要：在公司的一次内部分享会上, 偶然知道了这个H5的新事件, 解决了我之前的一个bug. 事情是这样的, 第A网页上显示的数量的总和, 点击去是B页面, 可以进行管理, 增加或者删除, 当用户做了增删操作之后, 返回到A页面的时候不会更新数量, 这个问题困扰了很久 终于等到storage事件, 据说淘宝
阅读全文
posted @ 2018-04-26 19:55
requestAnimationFrame 持续动画效果
摘要：1. requestAnimationFrame 概述 requestAnimationFrame 是浏览器用于定时循环操作的一个API, 类似于setTimeout, 主要用途是按帧对网页进行重绘. 设置这个API的目的就是为了让各种网页动画效果 (DOM动画, Canvas动画, SVG动画,
阅读全文
posted @ 2018-04-24 10:13
解决IOS移动端 Safari浏览器 onclick无法触发的问题
摘要：在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变大, 本来这个设计是很好的, 但是这也跟前端工程师带来麻烦, 当头部和尾部隐藏掉之后, 再点击底部的
阅读全文
posted @ 2018-04-20 09:50
使用http-server创建本地服务
摘要：在很多情况下, 都需要开启本地http服务器来测试, 所以就需要一个简单省事的http服务器, , 以前的时候可以使用express或者webpack-dev-server来启动一个服务, 这未免有点复杂, 有的时候就是写一个小小的demo而已, 终于...发现了这个好东西, http-server
阅读全文
posted @ 2018-04-18 18:40
30-seconds-of-css
摘要：你可以再30秒或者更短的时间内读懂的有用的CSS代码片段的精选. github地址 不过代码不在github上面 官网地址 上面有详细的介绍和演示 下面是我读到的一些个人认为比较实用的片段 1. 等宽高比 给定一个可变宽度的元素, 它确保其高度以响应的方式与宽度保持成比例, 即宽度与高度的比例保持一
阅读全文
posted @ 2018-04-12 09:04
div里面的图片垂直居中
摘要：外面一个div, 里面是一张大小不固定的图片, 或者span,div都行, 要实现里面元素水平垂直居中对齐 其实有很多实现的方法, 比如用js去计算每一个子元素的高度, 通过js去动态设置magin值, 不过这有点麻烦 今天分享一种用css实现的水平垂直居中对齐 看代码 效果如下 子元素的大小可以随
阅读全文
posted @ 2018-03-09 11:31
js 移动端写搜索时怎么调用软键盘上面的搜索按钮
摘要：这段时间一直在做移动端,所以遇到很多问题,现在很多网站在做移动端搜索的时候都不会在后面加一个搜索按钮,而是直接调用输入法上面的搜索搜索按钮进行搜索 input的一个新属性给我们提供非常方便的书写, 就是 type = search;如果直接这么写,在IOS上可能会有问题 需要一个form标签套起来,
阅读全文
posted @ 2017-12-20 10:23
js将foo-bar转为fooBar
摘要：这是一道js的面试题,就是考察将普通面命转为小驼峰命名
阅读全文
posted @ 2017-09-13 21:15
