好久沒(méi)用原生寫(xiě)項(xiàng)目，拿到一個(gè)小頁(yè)面有點(diǎn)懵
需求：手機(jī)App自適應(yīng)，web端固定寬度翎猛，顯示的中間
要適應(yīng)手機(jī)屏幕和web端，但是頁(yè)面布局沒(méi)有變化接剩。所以不要用到柵格办成，只要使用媒體查詢配套編寫(xiě)不同css。這里我以479px為節(jié)點(diǎn)
要適應(yīng)多種大小手機(jī)屏幕搂漠，頁(yè)面大多使用百分比定義大小
視口
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no，user-scalable=no">
width=device-width：使布局視口的大小變成理想視口的大小某弦，即設(shè)備屏幕的寬度
initial-scale初始縮放比例桐汤，當(dāng)設(shè)置width=device-width時(shí)而克，initial-scale默認(rèn)為1.0
minimum-scale=1,maximum-scale=1，最大縮放比例和最小縮縮放比例都是1怔毛，避免因?yàn)槭謾C(jī)操作導(dǎo)致頁(yè)面放到縮小员萍，例如蘋(píng)果的日期選擇默認(rèn)出現(xiàn)在頁(yè)面下方，導(dǎo)致頁(yè)面放大拣度。
shrink-to-fit=no 蘋(píng)果專屬屬性碎绎，值顯示你要指定的，而不會(huì)縮小把寬度100%之外的也顯示抗果。
user-scalable=no不法縮放
修改placeholder樣式
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #B4B4B4;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #B4B4B4;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #B4B4B4;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #B4B4B4
}
同樣文本框的只要換成textArea就好了
原生表單
下拉選擇框
<select name='society' id='society'>
<option value="0">- 請(qǐng)進(jìn)行選擇 -</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
問(wèn)題：下拉框的樣式太丑筋帖，搞了半天沒(méi)找到下拉框的樣式怎么改的。網(wǎng)上的appearance為none冤馏，設(shè)置option的樣式日麸，都沒(méi)有生效。如果想要一個(gè)好看的的下拉框逮光，還是要自己寫(xiě)代箭，用div+ul。這個(gè)項(xiàng)目沒(méi)有那么高的要求涕刚，所有我就沒(méi)寫(xiě)嗡综。
同樣還有H5 的日期，彈框是根據(jù)瀏覽器來(lái)的杜漠，改不了极景。要求高的，可以自己寫(xiě)碑幅。網(wǎng)上還有許多寫(xiě)好的插件戴陡，可以用。
取值
let society=document.getElementById('society').value
單選
<label ><span class='required'>*</span> 運(yùn)動(dòng)1</label><br>
<div class='sports'>
<input type='radio' name='sports1' value='0' checked/>羽毛球
<input type='radio' name='sports1' value='1'/>籃球
<input type='radio' name='sports1' value='2'/>乒乓球<br>
</div>
取值
let radio=Array.from(document.getElementsByName('sports1')).filter(item=>item.checked)[0].value
多選
<div class='sports'>
<input type='checkbox' name='sports2' value='0' checked/>羽毛球
<input type='checkbox' name='sports2' value='1'/>籃球
<input type='checkbox' name='sports2' value='2'/>乒乓球
</div>
取值
let checkbox=[];
Array.from(document.getElementsByName('sports2')).map(item=>{
if(item.checked)
checkbox.push(item.value)
})
let date=document.getElementById('date').value
屏蔽表單的默認(rèn)提交
<form action="" method='post' onsubmit="return false">
<button class='submit' onClick='checkForm()' >
提交報(bào)名信息
</button>
</form>
表單驗(yàn)證
if(checkbox.length==0){
modal.innerHTML='請(qǐng)選擇運(yùn)動(dòng)2!'
}else{
modal.innerHTML='提交成功沟涨！'
mask.onclick=()=>{
location.reload()
}
}
必填項(xiàng)提示恤批，彈框，下面說(shuō)裹赴。
如果是提交成功點(diǎn)擊頁(yè)面重新加載?
提示彈框+遮罩層
<div class='mask' onclick='closeMask()' >
<div class='modal'> </div>
</div>
css
#activity .mask{
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
position: fixed;
top: 0;
left: 0;
z-index: 998;
display: none;
}
#activity .mask .modal{
background: rgba(0, 0, 0, 0.6);
width:280px;
height:150px;
line-height: 150px;
position: absolute;
top:20%;
left:50%;
transform: translate(-50%);
border-radius: 5px;
color:#fff;
text-align: center;
font-size:16px;
}
點(diǎn)擊提交信息
function checkForm(){
mask.style.display='block';//顯示遮罩層
}
報(bào)錯(cuò)時(shí)點(diǎn)擊頁(yè)面
function closeMask(){
let mask=document.getElementsByClassName('mask')[0];
mask.style.display='none';//隱藏遮罩層
}
效果圖如下
