小草莓的博客

前端技术积累

打卡 -- js

1、原始类型有哪几种?null是对象吗?基本数据类型和引用数据类型的区别? 01. 原始类型有5种:Number、Boolean、String、Undefined、Null 后来新增symbol以及未来ES10新增的BigInt(任意精度整数)七类   Number:用来表示整数和浮点数,...

2019-05-30 15:48:01

阅读数 3

评论数 0

弹窗动效

/* 动效 */ .anim { animation-duration: .8s; animation-fill-mode: both; } .anim.bounceIn { animation-duration: 0.5s; } .bounceIn { animation-...

2019-03-20 10:14:11

阅读数 77

评论数 0

移动端 -- 最简单的移动端适配方案(rem+vw)

1.设计稿(前提设计稿是750px的) 1vw = 屏幕的1% 100vw = 屏幕的宽度 = 750px 1px = 0.1333333333vw 为了方便计算,放大100倍。则100px = 13.33333333vw html{font-size:13.33333333vw} ...

2019-03-20 10:12:52

阅读数 110

评论数 0

js -- 常见面试题1(事件冒泡、事件委托)

1、事件冒泡 01、 什么是事件冒泡 当一个元素接收到事件的时候,会把接收到事件传递给自己的父级(这里的传递仅仅是事件的传递,并不传递所绑定的事件。所以如果父级没有绑定事件函数,就算传递了事件,也不会有什么表现。但是事件确实传递了) 02、阻止冒泡 标准的W3C方式:e.stopPropa...

2019-03-20 10:12:28

阅读数 112

评论数 0

js -- 常见面试题2(盒模型)

由于浏览器的差异性,盒模型分为标准盒模型和IE盒模型 它们的呈现方式和对盒子大小的计算略有不同。 <div class="box_1"></div> <div class="box_2&quo...

2019-03-20 10:04:20

阅读数 44

评论数 0

js -- 常见面试题3(块级元素和行内元素的区域)

块级元素: 没有设置宽度时,它的宽度是其容器的 100%; 可以给块级元素设置宽高、内边距、外边距等盒模型属性; 块级元素可以包含块级元素和行内元素; 常见的块级元素有:<div>、<h1>~<h6...

2019-03-20 10:02:13

阅读数 19

评论数 0

HTML语义化

HTML 语义化是指仅仅从 HTML 元素上就能看出页面的大致结构。 比如需要强调的内容可以放在 <strong> 标签中,而不是通过样式设置 <span> 标签去做。 不同浏览器对 HTML 元素的解析可能有差异,HTML 语义化便是在...

2019-03-20 09:58:14

阅读数 9

评论数 0

移动端 --- 阻止浏览器点击图片浏览行为

01. 在img元素上添加 onclick="return false" <img src="a.png" onclick="return false" /> 02. 图片用背景图的方式插入 back...

2019-03-19 11:40:53

阅读数 13

评论数 0

移动端 -- 微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整?

01、原因 Anroid则是复写了 layoutinflater 对 textview 做了统一处理 ios则是修改了 body.style.webkitTextSizeAdjust 值 02、普通解决方案: android暂无方案 ios使用-webkit-text-size-ad...

2019-03-19 11:14:29

阅读数 25

评论数 0

移动端 -- webkit表单元素

1. 如何重置默认外观? .css{-webkit-appearance:none;} 2. 改变输入框placeholder的颜色值? input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-inp...

2019-03-19 11:13:58

阅读数 21

评论数 0

移动端 -- 屏幕旋转的事件和样式

1、事件 window.orientation,取值:正负90表示横屏模式、0和180表现为竖屏模式; window.onorientationchange=function(){ switch(window.orientation){ case-90: ...

2019-03-19 11:13:41

阅读数 102

评论数 0

移动端 -- 如何去掉元素被触摸时产生的半透明灰色遮罩?

1、ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0, 也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩 a,button,input,textarea{-webkit-tap-highl...

2019-03-19 10:44:11

阅读数 61

评论数 0

移动端 --- meta

H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <metaname="viewport"content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=...

2019-03-19 10:29:19

阅读数 79

评论数 0

移动端 --- 区分苹果终端和安卓终端

var u = navigator.userAgent // android终端 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // ios终...

2019-03-19 10:12:12

阅读数 95

评论数 0

PC端 -- 导航活动跳转

初始化 init(); // 初始化 绑定方法 /** * 绑定方法 */ function init() { browserVersions(); // 浏览器版本添加class 必须第一运行 headerNavBarEvent(); // 顶部导航事件 } 具体事件 ...

2019-03-19 10:08:53

阅读数 55

评论数 0

移动端 --- H5跳转外链

window.open('https://www.baidu.com');

2019-03-19 09:50:11

阅读数 132

评论数 0

JavaScript中的Date对象在Safari与IOS中不兼容

当我们用JavaScript实例化一个日期对象时 var date =new Date(); 但是如果我想根据字符串获取日期 var date =new Date("2016-05-31 08:00"); 这段代码是获得字符中指定的日期,它Firefox、Chrome中...

2019-03-19 09:47:15

阅读数 42

评论数 0

移动端 --- ios微信页面回退不刷新的问题

pushHistory(); window.addEventListener("popstate",function(e){},false); functionpushHistory(){ varstate={ title:"titl...

2019-03-19 09:44:26

阅读数 71

评论数 0

移动端 --- JS关闭手机微信端网页

WeixinJSBridge.call('closeWindow');

2019-03-19 09:42:57

阅读数 189

评论数 0

移动端 --- 解决ios上fixed失效的问题

2019-03-19 09:32:26

阅读数 82

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭