整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
近接了個需求，要求長按某個標簽顯示刪除一個懸浮的刪除按鈕。這個需求其實在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小時內與您取得聯系。
