HTML
蚂蚁上的大象
一个大龄的前端渣渣
展开
-
web浏览器打开本地exe应用
像百度网盘那样打本地exe应用的办法。我们可以通过添加注册表. 向系统添加一个类似于http的私有协议(仅本地有效),然后浏览器调用。原创 2023-08-07 14:59:25 · 4728 阅读 · 3 评论 -
美不可言的CSS 三
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。内发光注意到box-shadow还有个inset,用于盒子内部发光利用这个特性我们可以在盒子内部的某个范围内设定颜色,做出一个新月形再加点动画和滤镜效果,“猩红之月”闪亮登场!注意到它散发着淡淡的红光,其实就是2个伪元素应用了模糊滤镜所产生的效果本demo地址:Crimson Crescent Loadingtext-shadow文本阴影,本质上和box-sh...转载 2020-11-06 15:05:31 · 372 阅读 · 0 评论 -
美不可言的CSS 二
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到CSS动画有延迟(delay)这一属性。举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚0.5秒(也就...转载 2020-11-06 15:00:04 · 232 阅读 · 0 评论 -
美不可言的CSS 一
3D 方块如何在 CSS 中创建立体的方块呢?用以下的 SCSS mixin 即可方块的长度、高度、深度都可以通过 CSS 变量自由调节@mixin cube($width, $height, $depth) { &__front { @include cube-front($width, $height, $depth); } &__back { @include cube-back($width, $height, $depth); }转载 2020-11-06 14:53:42 · 280 阅读 · 0 评论 -
你未必知道的CSS知识点
需要说明的是,创建复杂特效非我本意,其中大部分都是一两个div就能实现的效果。主要目的是演示渐变、阴影、变换、动画等知识的综合应用。知识点篇01.????CSS计数器的使用演示地址:codepen02.????文本缩进,块级用text-indent,内联用margin-left03.????美化表格常用技巧。等比、定宽、错色等演示地址:codepen...转载 2019-10-16 17:50:41 · 345 阅读 · 1 评论 -
姓名,身份证input验证过滤
在项目中总会出现一些身份校验的需求,今天跟大家说一下姓名和身份证的验证方法姓名验证:需求,可输入英文、汉字for(let i=0;i<e.length;i++){ if(/^[a-zA-Z\u4e00-\u9fa5]+$/.test(e[i])){ this.ruleForm.name= e; }else{ if(i == 0){ ...原创 2019-08-02 17:56:36 · 1611 阅读 · 0 评论 -
vue里px转rem,适用于移动端
1.安装lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的,如果安装失败的话推荐用cnpm淘宝镜像安装npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm install lib-flexible --save2.引入lib-flexible在main....转载 2019-08-03 17:18:55 · 319 阅读 · 0 评论 -
postcss-px2rem-exclude打包rem影响其它项目的解决方案
在同一个VUE实例下的多个项目,比如一个是H5,另一个为Admin管理系统,那么在H5中使用了"postcss-px2rem-exclude",这样会影响到Admin页面里的样式变化,这个时候我们就需要把需要的文件在编译时打包成rem,而不需要的文件则过滤掉。emmmmmm.......找了很多方法都没能做到,最后请教了一位大神,只需要在 .postcssrc.js 文件中配置一下就好了,下面...原创 2019-08-07 16:36:28 · 4441 阅读 · 0 评论 -
iYiuMessage 消息提示组件
自己写了一个简单的消息提示组件,我管他叫iYiuMessage。先给一个Github地址:https://github.com/JensenYao/iYiuMessage初版写出来有一段时间了,一直没有时间去整理发布博客,今天来给大家介绍一下iYiuMessage。初版iYiuMessage简单的运用 prototype 来完成的第一版。它现在可以自定义 Message 信息...原创 2019-08-27 18:45:10 · 226 阅读 · 0 评论 -
移动端H5的数据库,IndexDB和WebSql
本篇封装了移动端H5的数据库,兼容了IndexDB和WebSql,只需使用key-vale的方式进行存取;为什么要封装WebSql呢?ios9还不支持IndexDB;闲话少说,直接上代码var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//判断是否是iosvar isoVersion = ...原创 2018-08-16 10:38:57 · 8515 阅读 · 3 评论 -
微信小程序之简单暴力的Tab可滑动切换方式
最近一直在做小程序项目,对于不同需求来说真是烦不胜烦,之前做的订单页来说只需要可点击切换就可以,但是在后期的迭代中提到要求可滑动切换,下面我自己整理了一套比较简单暴力的滑动切换方式,与大家共享一下,下面有效果图。(菜鸟上路,不喜勿喷):.wxml <!--pages/mine/order/order.wxml--><view class='order'...原创 2018-08-16 10:51:20 · 4576 阅读 · 4 评论 -
JS控制伪元素的方法汇总
一. 缘由:有人提问如何用jq获取伪元素。我第一想法是强大的CSS Query应该可以获取伪元素吧。然而事实上,CSS Query并不能。即我们不能通过$(“:before”)、$(dom).find(“:before”)或document.querySelector(“:before”)来获取:before伪元素。为此,我不得不重新了解伪元素(Pseudo-element转载 2018-02-05 16:10:11 · 709 阅读 · 0 评论 -
获取元素CSS值之getComputedStyle方法熟悉
我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法。对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路。jQuery为何受欢迎,其中原因之一转载 2018-02-05 16:11:01 · 376 阅读 · 0 评论 -
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度问题
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全...原创 2018-02-08 16:43:16 · 233 阅读 · 0 评论 -
微信小程序之五星评分效果
自己写的Demo 数据是自己模拟的 希望下面的内容能够对大家有所帮助,不喜勿喷!下面上代码date 数据格式:var dateList = [{userId: 0,name: '王隔壁',nameurl: '../img/user-1.png',jdtype: 0,bqurl: [1, 2, 3, 4],money: 199,startarr: [2...原创 2018-03-01 15:58:01 · 5197 阅读 · 2 评论 -
微信小程序学习用demo推荐:列表项左滑删除效果
实现思路:1、每一个列表项由两个层组成,文本层与按钮层;2、触摸滑动时计算手指移动距离,文本层跟随手指移动;3、手指移动距离大于按钮宽度一半时,显示按钮,反之,不显示;4、缓动动画用css3属性transition控制;transition: left 0.2s ease-in-out; 代码:代码比较简单,详细实现看注释,就直接贴代码了。 index.wxml<...转载 2018-03-01 16:13:16 · 630 阅读 · 0 评论 -
微信小程序之支付倒计时
支付倒计时转载来源:http://www.wxapp-union.com/portal.php?mod=view&aid=890由于web 经验弱爆- - 一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗~ 事实证明,线程还是王道啊,一开始就应该这么搞嘛~度娘上面也看了很多都是用js写的,but,可能刚做...转载 2018-03-01 16:17:33 · 1791 阅读 · 0 评论 -
JQuery实现input上传图片显示缩略图
首先 HTML :<div> <input type="file" name="file" class="form-control" id="zx_img" style="padding: 0px;" placeholder="&nbsp;上传文件"> <div>转载 2017-12-08 18:32:36 · 7358 阅读 · 0 评论 -
html引入js添加随机数后缀防止缓存
闲话不多说直接上码:方法一:<script id="script_1"></script><script> document.getElementById('script_1').src='./js/index.js?adv='+Math.random();</script>方法二:<script type=...原创 2018-08-14 11:14:04 · 7274 阅读 · 5 评论 -
H5 缓存机制浅析 移动端 Web 加载性能优化
1 H5 缓存机制介绍H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。H5 应用程序缓存为应用带来三个优势:离线浏览 用户可在应用离线时使用它们速度 已缓存资源加载得更快减少服务器负转载 2017-12-08 18:37:05 · 308 阅读 · 0 评论