移动端开发的问题集锦
程序员文章站
2022-07-14 17:06:12
...
1、如何修改input框placeholder的字体颜色
/* input框内placeholder字体颜色 */
::-webkit-input-placeholder {/*Chrome/Safari*/
color:#7d190f;
}
: :-moz-placeholder {/*Firefox*/
color:#7d190f;
}
: :-ms-input-placeholder {/*IE*/
color:#7d190f;
}
2、如何修改手机号码默认的字体颜色
//将手机自动识别手机的功能关闭:
<meta name="format-detection" content="telephone=no" />
//如果你还想要识别手机号的功能可以这样:
<a href="tel:15*******60">15*******60</a>
3、弹窗层是底层+覆盖层
(1)、底层样式
.mask{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(0,0,0,0.6);
z-index: 9;
}
(2)、覆盖层(根据设计来做)
.box1{
width: 8.4rem;
height:4.506rem;
background: url(img/box-4.png) no-repeat;
background-size: cover;
text-align: center;
overflow: auto;
color: #9a1d21;
position: fixed;
left: 9.5%;
top: 30%;
z-index: 999;
background: #fff4e2;
box-sizing: border-box;
display:none;
}
4、字体的渐变(从上到下)
.gradient {
display: inline-block;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 222, 31, 1)));
background: -o-gradient(linear, 0 0, 0 bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 222, 31, 1))); /* Opera 11.1 - 12.0 */
background: -moz-gradient(linear, 0 0, 0 bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 222, 31, 1))); /* Firefox 3.6 - 15 */
background: linear-gradient(linear, 0 0, 0 bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 222, 31, 1))); /* 标准的语法(必须放在最后) */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
5、改变input框的光标长度以及颜色
caret-color:red;//光标的颜色
//使用padding来控制光标的高度
6、遮罩层底部禁止滚动
body.modal-open {
position: fixed;
width: 100%;
}
var ModalHelper = (function(bodyCls) {
var scrollTop;
return {
afterOpen: function() {
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function() {
document.body.classList.remove(bodyCls);
// scrollTop lost after set position:fixed, restore it back.
document.scrollingElement.scrollTop = scrollTop;
}
};
})('modal-open');
7、pc端遮罩的动画显示效果
父级元素
.parent{
position:relative;
width:200px;
height:200px;
}
子级元素
.child{
width:200px;
height: 0px;
background: rgba(0,0,0,0.6);
position: absolute;
top:200px;
left:0px;
visibility: hidden;
transition: linear .3s;
z-index:100;
}
动画效果
.parent:hover .child{
top:0px;
height:200px;
visibility:visible;
}
小球的上线跳动
.balloon-show{
-webkit-animation:pulsate 1s linear infinite backwards;
animation: pulsate 1s linear infinite backwards;
-moz-animation: pulsate 1s linear infinite backwards;
-ms-animation: pulsate 1s linear infinite backwards;
-o-animation: pulsate 1s linear infinite backwards;
}
@keyframes pulsate{
0%{margin-top:0px}
50%{margin-top:-10px}
100%{margin-top:0px}
}
@-webkit-keyframes pulsate{
0%{margin-top:0px}
50%{margin-top:-10px}
100%{margin-top:0px}
}
8、background-size:cover和100%的区别
background-size:100% 100%;//按容器比例撑满,图片变形;
background-size:cover;//把背景图片放大到适合元素容器的尺寸,图片比例不变。
//IE8及以下版本用滤镜来兼容background-size如下:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');}
9、动画刮卡的效果
var newWidth = $("#img_size").width();
var newHeight =$("#img_size").height();
var c = document.getElementById("myCanvas");
c.width = newWidth;
c.height = newHeight;
var context = c.getContext("2d");
var img=document.getElementById("tulip");
context.drawImage(img,10,10,newWidth,newHeight);
c.addEventListener("touchmove",function(e) {
e.preventDefault();
var touch=e.touches[0];
var bbox = c.getBoundingClientRect();
var x = touch.clientX - bbox.left * (c.width/bbox.width);
var y = touch.clientY - bbox.top * (c.height/bbox.height);
context.clearRect(x,y,100,100);
}, false);
10、定时器出错的问题是语法写错了
setTimeout(showBox1, 3000);
function showBox1(){
$(".gua_title").html(joinInfo.number);
$(".gua_name").html(joinInfo.type);
$(".gua_time").html(joinInfo.time);
$(".box_guaguale").show();
}
11、判断一个对象是否为空
function isEmptyObject(obj) {
for (var key in obj) {
return false;
}
return true;
}
12、页面间传参(参数带有中文)
可以使用session
//设值
sessionStorage.setItem("data",JSON.stringify(prepareData.my_lucky_list));//我的奖品
//取值
var data = $.parseJSON(sessionStorage.getItem("data"));
13、后台传过来的时间戳处理
== ==如果后台传过来的时间,不是毫秒计算的,则要乘以1000====
//方法一
function format(times){
var time = new Date(times);
var y = time.getFullYear();//年
var m = time.getMonth() + 1;//月
var d = time.getDate();//日
var h = time.getHours();//时
var mm = time.getMinutes();//分
var s = time.getSeconds();//秒
return (y+"-"+m+"-"+d+" "+h+":"+mm+":"+s);
}
alert(format(1347497754133))
//方法二:通过原型来改写
Date.prototype.format = function() {
return this.getFullYear() + "" + (this.getMonth() >= 9 ? this.getMonth() + 1 : "0" + (this.getMonth() + 1)) + "" + (this.getDate() > 9 ? this.getDate() : "0" + this.getDate()) + ""
+ (this.getHours() > 9 ? this.getHours() : "0" + this.getHours()) + "" + (this.getMinutes() > 9 ? this.getMinutes() : "0" + this.getMinutes()) + ""
+ (this.getSeconds() > 9 ? this.getSeconds() : "0" + this.getSeconds());
};
var date = new Date(parseInt("1347497754133"));
date.format("yyyy-MM-dd");
14、input框计算
<div class="act-1" style="margin-top: 0.4rem;">
<input placeholder="投资金额" id="input_amount"/> *
<input placeholder="投资天数" id="input_period"/>/365 =
<input id="compute_result"/> 积分
</div>
//计算积分
$("#input_amount,#input_period").on("focus blur keyup",function(){
var input_amount = $("#input_amount").val();
var input_period = $("#input_period").val();
if (input_amount!='' && input_period!='') {
input_amount = Number(input_amount);
input_period = Number(input_period);
$("#compute_result").val(Math.round(input_amount * input_period / 365));
}
});
15、js终止语句
return false 只在当前函数有效,不会影响其他外部函数的执行。也可以阻止事件冒泡
$('a').click(function (e) {
// custom handling here
e.preventDefault();
});
$('a').click(function () {
// custom handling here
return false;
});
==return false会阻止后续默认动作的执行。
比如,一个<a>点击后打开一个链接,如果你给这个<a>添加一个click事件,在click事件中return false,那么你点击这个<a>后,会处理click事件,但是不会打开链接了。==
16、清除绑定事件(更适用于非button标签)
$(".Oceania").prop("onclick",null).off("click");//jQuery1.7+
$(".Oceania").attr('onclick','').unbind('click');//jQuery-1.7
button标签可用如下简便方式:
$(".edit").prop("disable",true);//使用disable属性就可以禁止click触发
17、判断某个元素是否存在(通过判断length)
var isHas = $("#A").find("img");
if(isHas.length){
//元素存在
}else{
//元素不存在
}
18、prop()与attr()的区别
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
19、获取移动设备可视区域的高度和宽度:
screen.width;
screen.height;
20、
setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。