欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

移动端开发的问题集锦

程序员文章站 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()。
相关标签： 移动

上一篇： Android消息机制总结 Handler Looper MessageQueue Message

下一篇： OGNL, JSTL, STRUTS2标签中符号#,$,%的用法示例

推荐阅读