整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事件了。
大概效果如下：
设计思路：
由此我们可以实现模拟的长按事件了。
上代码
请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果
css中大部分只是做了样式的美化，还有一开始让删除按钮隐藏起来
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./longpress.css" /> </head> <body> <div class="container"> <div class="label" id="label">长按我</div> <div class="delete_btn">删除</div> </div> <script src="./longpress.js"></script> </body> </html>
JS
let timer = null
let startTime = ''
let endTime = ''
const label = document.querySelector('.label')
const deleteBtn = document.querySelector('.delete_btn')
label.addEventListener('touchstart', function () {
startTime = +new Date()
timer = setTimeout(function () {
deleteBtn.style.display = 'block'
}, 700)
})
label.addEventListener('touchend', function () {
endTime = +new Date()
clearTimeout(timer)
if (endTime - startTime < 700) {
// 处理点击事件
label.classList.add('selected')
}
})
CSS
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.label {
display: inline-block;
box-sizing: border-box;
width: 105px;
height: 32px;
line-height: 32px;
background-color: #F2F2F2;
color: #5F5F5F;
text-align: center;
border-radius: 3px;
font-size: 14px;
}
.label.selected {
background-color: #4180cc;
color: white;
}
.delete_btn {
display: none;
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) translateY(-100%);
color: white;
padding: 10px 16px;
background-color: rgba(0, 0, 0, .7);
border-radius: 6px;
line-height: 1;
white-space: nowrap;
font-size: 12px;
}
.delete_btn::after {
content: '';
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, .7) transparent transparent transparent;
position: absolute;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
}
ps: touchstart和touchend只有在移动端设备上才有用，如果要看代码示例的话请:
即点击如下图:
天给大家推荐的是PhET™免费在线物理、化学、生物、地理及数学交互性仿真程序平台，这是来自科罗拉多大学的物理教育技术项目，自2009年诞生至今已经涉及到物理、化学、生物、地理和数学等诸多学科。
PhET™仿真演示平台
英文原版地址
https://phet.colorado.edu/
中文版地址
https://phet.colorado.edu/zh_CN/
这是一个在线平台，而且还支持HTMl5，也就是说好多仿真程序可以使用移动设备来访问。例如下面这两个案例。
PH值仿真演示地址 https://phet.colorado.edu/sims/html/ph-scale/latest/ph-scale_zh_CN.html
三角函数之旅访问地址 https://phet.colorado.edu/sims/html/trig-tour/latest/trig-tour_zh_CN.html
长按网址选择复制打开访问，或长按二维码识别都能访问
PhET™拥有丰富的仿真演示程序，在主页的左侧有各种分类。包括按学科：物理、生物、化学、地球科学、数学等；按学段：小学、中学、高中和大学等；还有按设备分类：iPad等平板、Chromebook。部分仿真程序已翻译成中文，有些新的可能还是英文，不过也不影响教学演示用。
再来看几个案例，为了观看方便，这里直接录制成了GIF动图。要体验交互效果请访问PhET平台相应程序。
物理-胡克定律
生物-彩色视觉
化学-密度
地理-太阳系系统
数学-二项分布弹珠台机率
你还想了解怎么开发的？这里大概介绍下。从平台上提供的仿真演示程序可以看出主要使用了三大类技术：JAVA、FLASH及HTML5，使用不同技术开发的仿真程序都会有相应的标示，如下图。
PhET主要采用①JAVA、②FLASH、③HTML5三种技术开发仿真演示程序
PhET平台上的仿真程序除了直接访问使用，还允许下载或嵌入到其它网站来使用。嵌入就有点类似于优酷视频，底部会提供一段嵌入代码（如下图），只要将这段代码粘贴到博客、网站页面相应的地方，就可以实现程序“迁移”了。最关键的是HTML5演示程序也支持下载，下载后就得到一个HTML文件，特别方便，把这个HTML文件通过QQ、微信发给其它人或者上传到自己网站上就能轻松运行仿真程序了。
想想当年上学的时候，课堂上如果老师用这些模拟仿真程序来演示各种原理和现象，那该多直观啊。再也不用仅靠老师的文字描述然后绞尽脑汁去凭空想象了。
另外如果这些交互式仿真程序能够在交互环境下使用，例如交互式电子白板、触摸式一体机、移动设备等，会有更好的课堂效果。学生能亲自动手去探索一些学科原理和知识。
习是一件非常充实的过程，特别是把自己的乐趣变成工作的时候，很多朋友就喜欢学习web前端，所以学习前端，也希望从事前端的工作，但是因为缺少实战经验，所以很多都是卡在面试这关上，下面小猿圈总结了web前端中HTML5+CSS3面试题。
一、移动端（Android IOS）怎么做好用户体验?
1.清晰的视觉纵线
2.信息的分组、极致的减法
3.利用选择代替输入
4.标签及文字的排布方式
5.依靠明文确认密码
6.合理的键盘利用
二、什么是Retina 显示屏，带来了什么问题？
retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍
那么，前端的应对方案是：
设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}
三、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
四、部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2，对于按钮类还有个办法，不使用a或者input标签，直接用div标签。
五、webkit表单元素的默认外观怎么重置
通用：.css{-webkit-appearance:none;}
伪元素改变number类型input框的默认样式
input[type=number]::-webkit-textfield-decoration-container {
background-color: transparent;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
六、webkit表单输入框placeholder的颜色值能改变么?
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
七、webkit表单输入框placeholder的文字能换行么?
ios可以，android不行
在textarea标签下都可以换行
八、禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
九、禁止ios和android用户选中文字
.css{-webkit-user-select:none}
十、打电话发短信写邮件怎么实现
打电话：<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信，winphone系统无效<a href="sms:10086">发短信给: 10086</a>
写邮件：<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>
十一、模拟按钮hover效果
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活移动端css的active效果。
1. 直接在body上添加ontouchstart，同样可激活移动端css的active效果，比较推荐这种方式（兼容性ios5+、部分android 4+、winphone 8）。
2. 要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名
十二、audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播
$('html').one('touchstart',function(){
audio.play()
})
以上就是小猿圈web前端老师总结的HTML5+CSS3面试题一部分，想要查看下一部分可以观看的我下篇文章，相信不会让你失望的，学习前端可以到小猿圈网站去看一下最新最全面的前端课程。
*请认真填写需求信息，我们会在24小时内与您取得联系。
