web 页面音乐的无法自动播放问题探索

找到一个 程序员表白神器 的动画页面,看着画面非常好,结合其他的一些 表白 动画页面是可以有音乐的,就想着给它加一个。结果翻开代码一看,已经添加了,并且还设置了自动播放:<body> <audio autoplay="autoplay"> <source src="renxi.mp3" type=&quo

CSS 浮动高度塌陷问题解决

在 copy 别人官网时遇到新闻按照分类进行浮动布局的情况。各个子元素按照 float:left 向左浮动,从左到右排版。但是父元素显示的背景高度塌陷,没有将子元素包含在内。具体说明和分析参考:CSS中浮动塌陷的解决办法及分析文中提到三个方法:设置父元素高度设置父元素也浮动父元素内最后一个元素之后增加空元素,清除浮动第一和第三都比较适合解决问题。了解第三解决方法原理,找到原代码,果然设置了空元素,

HTTP 请求中 request payload 和 formData 区别

在测试 cacheAdmin 接口时发现,POST 请求 Headers tab 最下面的数据部分标题显示的是 Request PayLoad(请求有效载荷),这与自己常写的接口展示不太一样。正常标题显示为 Form Data,下面是一个对比图:看形式猜测是提交的数据类型有些区别,网上查找相关的文档,找到以下内容:FormData 和 Payload 是浏览器传输给接口的两种格式,这两种方式浏览器

js 数组添加元素和删除元素

js 数据的 push 和 pop 分别表示往数组添加一个元素和删除一个元素,遵循队列规则,先入先出,添加到队尾,从头部开始删除。如果是需要删除某个索引表示的元素,则需要用 splice(index, howmany, item1, item2...)。方法名翻译为绞接、捻接,定义为 向/从数组中添加/删除项目,然后返回被删除的项目。有一个名称比较相似的方法 slice(start, end),方

Highcharts 使用细节点总结

前言最近公司让做一个数据看板,主要统计公司主站的订单、用户注册量以及用户访问量等数据。前面部分的订单都可以直接写个查询接口显示数据,后面的订单类型、用户注册量、用户访问量则涉及到可视化图表的使用。作为 web 图表库,highcharts 是我了解的前端库里的不二之选。Highcharts 文档教程 Highcharts API 详解这里面三个图表分别用了三种不同类型的图表来展示,分别是饼状图(p

微信内 js 倒计时时间显示为 00:00:00 问题解析 —— js Date() 函数用法

前段时间在网上找了一个 js 版本的倒计时函数:JS 实现倒计时时间(天数、时、分、秒)。PC 端模拟器和微信开发者工具测试没有问题,订单列表页和详情页可以正常显示倒计时时间。但放到移动端(一开始以为是只是微信,后来所有浏览器测试都是这样)倒计时就一直停留在 00:00:00。实际使用的 demo:<div> <span id="d_h">00&

一步学会移动端 Flex 弹性盒子布局

有点标题党的嫌疑,但 Flex 弹性盒子布局使用确实不难,我主要用来快速解决移动端列表内容排版问题。比如两列商品排列,如果设置定宽,则在只是适配一种规格的设备。使用 rem 也不能完全解决问题,因为总有那么些项不是那么合适。media 也可以适配,但写那么多遍的那么多项的样式太繁琐。一些弹性布局诸如 bootstrap 或者 xxUI,一般采用百分比布局的方式来解决这个问题。外部容器 margin

移动端开发字体大小是否需要适配(自适应)?

在根据 UI 给的两倍高保真图写前端页面时发现,页面的根元素字体尺寸是动态变化的。选择不同的模拟设备(emulated devices),font-size 的数值还会发生变化。<html style="font-size: 19.0678px;"> ...发现这个问题是因为某个元素设置了 border-radius: 50% 在不同的设备下发生了形变。查看后发现,