整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
近接了個(gè)需求，要求長(zhǎng)按某個(gè)標(biāo)簽顯示刪除一個(gè)懸浮的刪除按鈕。這個(gè)需求其實(shí)在app上很常見(jiàn)，但是在移動(dòng)端h5中，我們沒(méi)有長(zhǎng)按的事件，所以就需要自己模擬這個(gè)事件了。
大概效果如下：
設(shè)計(jì)思路：
由此我們可以實(shí)現(xiàn)模擬的長(zhǎng)按事件了。
上代碼
請(qǐng)把重點(diǎn)放在JS上，這里貼出來(lái)完整的代碼是為了方便大家看個(gè)仔細(xì)，代碼可以拷貝直接看效果
css中大部分只是做了樣式的美化，還有一開(kāi)始讓刪除按鈕隱藏起來(lái)
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">長(zhǎng)按我</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) {
// 處理點(diǎn)擊事件
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只有在移動(dòng)端設(shè)備上才有用，如果要看代碼示例的話(huà)請(qǐng):
即點(diǎn)擊如下圖:
天給大家推薦的是PhET?免費(fèi)在線(xiàn)物理、化學(xué)、生物、地理及數(shù)學(xué)交互性仿真程序平臺(tái)，這是來(lái)自科羅拉多大學(xué)的物理教育技術(shù)項(xiàng)目，自2009年誕生至今已經(jīng)涉及到物理、化學(xué)、生物、地理和數(shù)學(xué)等諸多學(xué)科。
PhET?仿真演示平臺(tái)
英文原版地址
https://phet.colorado.edu/
中文版地址
https://phet.colorado.edu/zh_CN/
這是一個(gè)在線(xiàn)平臺(tái)，而且還支持HTMl5，也就是說(shuō)好多仿真程序可以使用移動(dòng)設(shè)備來(lái)訪(fǎng)問(wèn)。例如下面這兩個(gè)案例。
PH值仿真演示地址 https://phet.colorado.edu/sims/html/ph-scale/latest/ph-scale_zh_CN.html
三角函數(shù)之旅訪(fǎng)問(wèn)地址 https://phet.colorado.edu/sims/html/trig-tour/latest/trig-tour_zh_CN.html
長(zhǎng)按網(wǎng)址選擇復(fù)制打開(kāi)訪(fǎng)問(wèn)，或長(zhǎng)按二維碼識(shí)別都能訪(fǎng)問(wèn)
PhET?擁有豐富的仿真演示程序，在主頁(yè)的左側(cè)有各種分類(lèi)。包括按學(xué)科：物理、生物、化學(xué)、地球科學(xué)、數(shù)學(xué)等；按學(xué)段：小學(xué)、中學(xué)、高中和大學(xué)等；還有按設(shè)備分類(lèi)：iPad等平板、Chromebook。部分仿真程序已翻譯成中文，有些新的可能還是英文，不過(guò)也不影響教學(xué)演示用。
再來(lái)看幾個(gè)案例，為了觀(guān)看方便，這里直接錄制成了GIF動(dòng)圖。要體驗(yàn)交互效果請(qǐng)?jiān)L問(wèn)PhET平臺(tái)相應(yīng)程序。
物理-胡克定律
生物-彩色視覺(jué)
化學(xué)-密度
地理-太陽(yáng)系系統(tǒng)
數(shù)學(xué)-二項(xiàng)分布彈珠臺(tái)機(jī)率
你還想了解怎么開(kāi)發(fā)的？這里大概介紹下。從平臺(tái)上提供的仿真演示程序可以看出主要使用了三大類(lèi)技術(shù)：JAVA、FLASH及HTML5，使用不同技術(shù)開(kāi)發(fā)的仿真程序都會(huì)有相應(yīng)的標(biāo)示，如下圖。
PhET主要采用①JAVA、②FLASH、③HTML5三種技術(shù)開(kāi)發(fā)仿真演示程序
PhET平臺(tái)上的仿真程序除了直接訪(fǎng)問(wèn)使用，還允許下載或嵌入到其它網(wǎng)站來(lái)使用。嵌入就有點(diǎn)類(lèi)似于優(yōu)酷視頻，底部會(huì)提供一段嵌入代碼（如下圖），只要將這段代碼粘貼到博客、網(wǎng)站頁(yè)面相應(yīng)的地方，就可以實(shí)現(xiàn)程序“遷移”了。最關(guān)鍵的是HTML5演示程序也支持下載，下載后就得到一個(gè)HTML文件，特別方便，把這個(gè)HTML文件通過(guò)QQ、微信發(fā)給其它人或者上傳到自己網(wǎng)站上就能輕松運(yùn)行仿真程序了。
想想當(dāng)年上學(xué)的時(shí)候，課堂上如果老師用這些模擬仿真程序來(lái)演示各種原理和現(xiàn)象，那該多直觀(guān)啊。再也不用僅靠老師的文字描述然后絞盡腦汁去憑空想象了。
另外如果這些交互式仿真程序能夠在交互環(huán)境下使用，例如交互式電子白板、觸摸式一體機(jī)、移動(dòng)設(shè)備等，會(huì)有更好的課堂效果。學(xué)生能親自動(dòng)手去探索一些學(xué)科原理和知識(shí)。
習(xí)是一件非常充實(shí)的過(guò)程，特別是把自己的樂(lè)趣變成工作的時(shí)候，很多朋友就喜歡學(xué)習(xí)web前端，所以學(xué)習(xí)前端，也希望從事前端的工作，但是因?yàn)槿鄙賹?shí)戰(zhàn)經(jīng)驗(yàn)，所以很多都是卡在面試這關(guān)上，下面小猿圈總結(jié)了web前端中HTML5+CSS3面試題。
一、移動(dòng)端（Android IOS）怎么做好用戶(hù)體驗(yàn)?
1.清晰的視覺(jué)縱線(xiàn)
2.信息的分組、極致的減法
3.利用選擇代替輸入
4.標(biāo)簽及文字的排布方式
5.依靠明文確認(rèn)密碼
6.合理的鍵盤(pán)利用
二、什么是Retina 顯示屏，帶來(lái)了什么問(wèn)題？
retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋(píng)果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)
在高清顯示屏中的位圖被放大，圖片會(huì)變得模糊，因此移動(dòng)端的視覺(jué)稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍
那么，前端的應(yīng)對(duì)方案是：
設(shè)計(jì)稿切出來(lái)的圖片長(zhǎng)寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來(lái)的1/2
例如圖片寬高為：200px*200px，那么寫(xiě)法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來(lái)的1/2，例如視覺(jué)稿40px的字體，使用樣式的寫(xiě)法為20px
.css{font-size:20px}
三、ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉
ios用戶(hù)點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
四、部分android系統(tǒng)中元素被點(diǎn)擊時(shí)產(chǎn)生的邊框怎么去掉
android用戶(hù)點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符
另外，有些機(jī)型去除不了，如小米2，對(duì)于按鈕類(lèi)還有個(gè)辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽。
五、webkit表單元素的默認(rèn)外觀(guān)怎么重置
通用：.css{-webkit-appearance:none;}
偽元素改變number類(lèi)型input框的默認(rèn)樣式
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標(biāo)簽下都可以換行
八、禁止ios 長(zhǎng)按時(shí)不觸發(fā)系統(tǒng)的菜單，禁止ios&android長(zhǎng)按時(shí)下載圖片
.css{-webkit-touch-callout: none}
九、禁止ios和android用戶(hù)選中文字
.css{-webkit-user-select:none}
十、打電話(huà)發(fā)短信寫(xiě)郵件怎么實(shí)現(xiàn)
打電話(huà)：<a href="tel:0755-10086">打電話(huà)給:0755-10086</a>
發(fā)短信，winphone系統(tǒng)無(wú)效<a href="sms:10086">發(fā)短信給: 10086</a>
寫(xiě)郵件：<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>
十一、模擬按鈕hover效果
移動(dòng)端觸摸按鈕的效果，可明示用戶(hù)有些事情正要發(fā)生，是一個(gè)比較好體驗(yàn)，但是移動(dòng)設(shè)備中并沒(méi)有鼠標(biāo)指針，使用css的hover并不能滿(mǎn)足我們的需求，還好國(guó)外有個(gè)激活移動(dòng)端css的active效果。
1. 直接在body上添加ontouchstart，同樣可激活移動(dòng)端css的active效果，比較推薦這種方式（兼容性ios5+、部分android 4+、winphone 8）。
2. 要做到全兼容的辦法，可通過(guò)綁定ontouchstart和ontouchend來(lái)控制按鈕的類(lèi)名
十二、audio元素和video元素在ios和andriod中無(wú)法自動(dòng)播放
應(yīng)對(duì)方案：觸屏即播
$('html').one('touchstart',function(){
audio.play()
})
以上就是小猿圈web前端老師總結(jié)的HTML5+CSS3面試題一部分，想要查看下一部分可以觀(guān)看的我下篇文章，相信不會(huì)讓你失望的，學(xué)習(xí)前端可以到小猿圈網(wǎng)站去看一下最新最全面的前端課程。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
