关于h5设配手机的一些jquery封装

最新推荐文章于 2023-05-12 14:21:23 发布
最新推荐文章于 2023-05-12 14:21:23 发布
阅读量227 收藏
点赞数
分类专栏： jquery csss布局 文章标签： 验证码倒计时 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43278947/article/details/90290570
版权

关于h5设配手机的一些jquery封装

众所周知，h5的项目在开发中会有很多适配的问题，不像pc中那么的单纯，给自己记下的笔记，就当学习了~。
首先是关于手机终端问题

1.判断是否为微信：

/*判断微信==================*/
function isWeiXin() { //返回true/false
	var ua = window.navigator.userAgent.toLowerCase();
	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		return true;
	} else {
		return false;
	}
}
/*判断微信end*/

2.判断是否为移动端（乐视手机）

/*判断是否为移动端==================*/
function isMobile() { //返回true/false
	var userAgentInfo = navigator.userAgent;
	/*var Agents = new Array("Android", "iPhone","ipad","iPad", "SymbianOS", "Windows Phone", "iPad", "iPod");*/
	var Agents = ["Android", "iPhone", "ipad", "iPad"];
	var flag = false;
	for (var v = 0; v < Agents.length; v++) {
		if (userAgentInfo.indexOf(Agents[v]) >= 0) {
			flag = true;
			return flag;
		}
	}
	//匹配乐视手机max2
	if (userAgentInfo ==
		"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/37.0.696.34 Safari/534.24") {

		flag = true;
	}
	return flag;
}
/*判断是否为移动端end*/

3.若是移动端给body加一些class

/*根据浏览器 给 body 加 class 自动执行==================*/
(function() {
	function browser() { //移动端 body标签写入 class="Android"/ "iPhone"
		var userAgentInfo = navigator.userAgent;
		/*var Agents = new Array("Android", "iPhone","ipad","iPad", "SymbianOS", "Windows Phone", "iPad", "iPod");*/
		var Agents = ["Android", "iPhone", "ipad", "iPad"];
		for (var v = 0; v < Agents.length; v++) {
			if (userAgentInfo.indexOf(Agents[v]) >= 0) {
				$("body").addClass(Agents[v]);
				return;
			}
		}
	}
	$().ready(function() {
		browser();
	});
})();
/*根据浏览器 给 body 加 class end==================*/

4.解决三星note2 数字键盘没有小数点

function mCommon20150221_note2NumInput(obj) { //参数是查找范围 jq对象，默认是document
	var box = $(document); //查找范围
	if (obj != null && obj != "") { //如果obj有参数
		box = obj; //查找范围是obj
	}
	var userAgentInfo = navigator.userAgent;
	var note2 = "GT-N7108"; //note的标记
	var qqBrowser = "MQQBrowser"; //qq浏览器
	if (userAgentInfo.indexOf(note2) > 0 && userAgentInfo.indexOf(qqBrowser) < 0) { //如果是note2,且不是qq浏览器
		box.find('input[type="number"]').attr("type", "text");
	}
}
$().ready(function() {
	mCommon20150221_note2NumInput();
});
/*解决三星note2 数字键盘没有小数点 end================*/

5.纯jquery写验证码倒计时。
在这里插入图片描述
首先html页面

<div class="mRegisterpage_form">
			<div id="_inputTelcontainer" class="mCommon_basicInputTel mCommon_delPicHide">
				<input id='mobile2' type="tel" maxlength="11" placeholder="请输入手机号">
				<img src="../images/mRegisterpage_deletePw.png">
			</div>
			<p id='tips'  class="tips">!手机号不能为空</p>
			<div class="mCommon_basicInputValidateCode_box" id="mCommon_container">
			    <div class="mCommon_basicInputValidateCode_boxInput">
			        <input type="text"  maxlength="6" placeholder="请输入验证码" type="number">
			    </div>
			    <div class="mCommon_basicInputValidateCode_boxOperation">
			        <div class="mCommon_basicInputValidateCode_boxCode mCommon_basicInputValidateCode_boxObtain">获取验证码</div>
			        <div class="mCommon_basicInputValidateCode_boxCode mCommon_basicInputValidateCode_boxTiming">重新获取<i>60</i>s</div>
			    </div>
			</div>
		</div>
------------------------------------------------------------------------------
<style>
/*输入框*/
.mRegisterpage_form{
	display:flex;
	flex-direction:column;
	padding:15px 20px;
}
.mCommon_basicInputTel {
    display:flex;
    border: 1px solid #e1e2e6;
    padding: 7px 10px;
    background-color: #f5f6f8;
	border-radius:4px;
}
.mCommon_basicInputTel > input {
    border: 0;
    height: 24px;
    font-size: 14px;
    color: #333333;
    width: 100%;
	background-color:#f5f6f8;
}
.mCommon_delPicHide > img {
    display: none;
}
.mCommon_basicInputTel > img {
    width: 24px;
    height: 24px;
}
/*验证码*/
.mCommon_basicInputValidateCode_box{
    display: table;
    width:100%;
    table-layout: fixed;
	margin-top:15px;
	border-radius:4px;
}
.mCommon_basicInputValidateCode_boxInput{
    display: table-cell;
    width:100%;
    padding:7px 10px;
    background-color:#f5f6f8;
    border:1px solid #e1e2e6;
    border-right:none;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
}
.mCommon_basicInputValidateCode_boxInput>input{
    width:100%;
    line-height: 26px;
    height: 26px;
    color: #333;
    font-size: 14px;
    border:0;
	background-color:#f5f6f8;
}
.mCommon_basicInputValidateCode_boxOperation{
    display: table-cell;
    width: 110px;
    padding:7px 0px;
    background-color:#f5f6f8;
    font-size:14px;
    text-align: center;
    border:1px solid #e1e2e6;
    border-left:none;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
}
.mCommon_basicInputValidateCode_boxCode{
    height:26px;
    line-height:26px;
    border-left: 1px solid #e1e2e6;
}
.mCommon_basicInputValidateCode_boxObtain{
    color:rgb(26,134,199);
    cursor: pointer;
}
.mCommon_basicInputValidateCode_boxObtainDefault{
    color:#bfbfbf;
    cursor: default;
}
.mCommon_basicInputValidateCode_boxTiming{
    color:#878f95;
    cursor: default;
    display: none;
}
</style>

当前页面的js部分

<script>
var idObj = {
		_inputTelcontainer:$("#_inputTelcontainer"),//手机号输入框
		mCommon_container:$("#mCommon_container"),//验证码
	};
	
	var _inputTel = new mCommon_basicInputTel({
	   //输入框外容器，jq对象，必填
	   telInputBox:idObj._inputTelcontainer,
	   //手机号输入框删除回调事件,选填
	   telDeleteClickCB:function(){
		   console.log('清空内容回调');
	   },
	   //内容改变的回调事件，选填
	   inputChangeValCB:function(){
		   console.log('内容更改了啊');
	   }
   });
   
	var _setTimeObj= new mCommon_basicInputValidateCode_setTime({
	    //验证码外容器
	    codeBox:idObj.mCommon_container,
	    //点击获取按钮执行的回调事件,选填
	    obtainClick:function(){
	        var isContinue = true;
			console.log('回调');
			if($('#mobile2').val() == undefined ||$('#mobile2').val()=='' ) {
			
			}else {
				let mobile2 = $("#mobile2").val()
				$.ajax({
				type: "post",
				url: "",
				data: {mobile:mobile2},
				dataType: "json",  
				jsonp:'callback',
				success: function(res){
			     if(res.errcode == '1002')	 {

				 } else if(res.errcode=='1000' || res.errcode=='1001') {
				
					}, 2000);   
				 }	
				}
			});	
	        return isContinue;
			}
	    }
	});
	</script>

在公共js里封装的js:

/**
 * 验证码倒计时
 */
function mCommon_basicInputValidateCode_setTime(options){
    this.setting={
        //验证码外容器
        codeBox:null,
        //点击获取按钮执行的回调事件,选填
        obtainClick:null
    };
    options = options || {};
    //合并参数
    $.extend(true, this.setting, options);
    //容器必须存在
    if(!this.setting.codeBox || this.setting.codeBox.length == 0){
        return false;
    }
    //获取验证码按钮不可编辑
    this.$obtainDefault = this.setting.codeBox.find('.mCommon_basicInputValidateCode_boxObtainDefault');
    //获取验证码按钮可编辑时
    this.$obtain = this.setting.codeBox.find('.mCommon_basicInputValidateCode_boxObtain');
    //倒计时按钮
    this.$timing = this.setting.codeBox.find('.mCommon_basicInputValidateCode_boxTiming');
    //倒计时读秒放入的容器
    this.$timeBox = this.$timing.children('i');
    //倒计时时间
    this.timeNum = 60;

    var _self = this;
    //按钮状态改变为不可编辑
    this.changeNoEdit = function(){
        _self.$obtainDefault.show();
        _self.$obtain.hide();
        _self.$timing.hide();
        _self.setObtainStyleFun();
    };
    //按钮状态改变为可编辑
    this.changeEdit = function(){
        _self.$obtainDefault.hide();
        _self.$obtain.show();
        _self.$timing.hide();
    };
    //获取验证码的点击事件
    this.obtainClick = function(){
        this.$obtain.click(function(){
            var isContinue;
            try {
                isContinue = _self.setting.obtainClick();
            }catch (e){

            }
            //判断是否要继续执行倒计时
            if(!isContinue){
                return false;
            }
            _self.$obtain.hide();
            _self.$timing.show();
            _self.countDown();
        });
    };

    //倒计时
    this.countDown = function(){
        if(0 == _self.timeNum){
            _self.clearTimeoutFun();
            _self.setObtainStyleFun();
            _self.changeEdit(); //20161024
            return;
        }else{
            _self.$timeBox.text(_self.timeNum);
            _self.timeNum -= 1;
        }
        self.timeoutId = setTimeout(function(){
            _self.countDown();
        },1000);
    };
    //清除setTimeout事件
    this.clearTimeoutFun = function(){
        //判断
        if(self.timeoutId){
            clearTimeout(self.timeoutId);
        }
    };
    //退出时把按钮设置为初始样子
    this.setObtainStyleFun = function(){
        _self.$timing.hide();
        _self.$obtain.hide();
        _self.$obtainDefault.show();
        _self.timeNum = 60;
        _self.clearTimeoutFun();
    };
    //初始化
    this.initFun = function(){
        this.obtainClick();
    };
    //执行初始化
    this.initFun();
};

/*
*手机号删除事件
*/
function mCommon_basicInputTel(options){
    this.setting = {
        //输入框外容器，jq对象，必填
        telInputBox:null,
        //手机号输入框删除回调事件,选填
        telDeleteClickCB:null,
        //内容改变的回调事件，选填
        inputChangeValCB:null
    };
    options = options || {};
    //合并参数
    $.extend(true, this.setting, options);

    if(!this.setting.telInputBox || this.setting.telInputBox.length == 0){
       return false;
    }

    //电话输入框旁的删除按钮
    this.$telDeleteBtn = this.setting.telInputBox.find('img');

    var self = this;

    //电话输入框旁的删除事件
    this.telDeleteClickFun = function(){
        this.$telDeleteBtn.click(function(){
            if('' != $.trim($(this).prev().val())){
                $(this).prev().val('');
                self.setting.telInputBox.addClass('mCommon_delPicHide');
                try{
                    self.setting.telDeleteClickCB();
                }catch (e){

                }
            }
        });
    };
    //当输入框的内容改变时判断删除按钮是否要隐藏
    this.setting.telInputBox.find('input').on('input propertychange',function() { //输入框内的文字改变
        if('' == $(this).val()){ //当输入的文字删除后，隐藏 清除图标
            self.setting.telInputBox.addClass('mCommon_delPicHide');
        }else{
            self.setting.telInputBox.removeClass('mCommon_delPicHide');
        }
        try {
            self.setting.inputChangeValCB();
        }catch (e){

        }
    });

    //初始化
    this.init = function(){
        this.telDeleteClickFun();
    };

    //执行初始化
    this.init();
}

以上可以直接用哦，当然要引入 jquery或 zepto；

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
或者
<script type="text/javascript" src="https://qiniu.woaap.com/base_cdn/zepto.min.js"></script>
IF YOU～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端适配
weixin_44602430的博客
10-25 554
常用的解决移动端布局的方案大概有： 1.flex弹性布局 1）高度定死，宽度自适应，元素都采用px做单位。 2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。 2.百分比 3.用框架搭建页面 4.viewport适配 4.1 优点： 1）避免复杂的计算，直接使用UI的标准像素值 4.2 缺点： 2）不能使用meta标签 图片失真情况很严重 5.媒体查询media 6.rem+viewport缩放（也
微信小程序 全面屏的适配
攻城喵小猫的博客
08-01 1608
通过配置app.json的window属性的navigationStyle（导航栏样式，仅支持以下值： default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮），改为custom模式，来自定义navigator。 注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低...
H5+JQ模拟支付页面
10-11
简单易上手，二开可以拿去用，HTML5+jq支付框，可以直接拿去做修改也可以直接使用
h5聊天页面 jquery_基于Jquery WeUI的微信开发H5页面控件的经验总结（1）
weixin_42470359的博客
12-23 351
在微信开发H5页面的时候，往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发，由于本人喜欢在Asp.net的Web界面上使用JQuery，因此比较倾向于使用jQuery WeUI，本篇随笔结合官方案例和自己的项目实际开发过程的经验总结，对在H5页面开发过程中设计到的界面控件进行逐一的分析和总结，以期能够给大家在H5页面开发过程中提供有用的参考。1、资源参考一般情况下，我们使用...
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
marcushbs的博客
04-10 592
在微信开发H5页面的时候，往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发，由于本人喜欢在Asp.net的Web界面上使用JQuery，因此比较倾向于使用jQuery WeUI，本篇随笔结合官方案例和自己的项目实际开发过程的经验总结，对在H5页面开发过程中设计到的界面控件进行逐一的分析和总结，以期能够给大家在H5页面开发过程中提供有用的参考。 本篇随笔继续上篇随笔《基于Jquery WeUI的微信开发H5页面控件的经验总结（1）》进行介绍其他部分的内容。 7）条码、二维码生成 在...
H5页面的适配问题 页面自适应 移动端设配问题
m0_69085594的博客
07-12 2460
关于H5页面的适配问题·页面自适应·移动端设配问题，如何做到屏幕变大页面内容不会乱，自适应屏幕大小
PC、移动端适配 - Vue、H5、 Jquery
weixin_51225684的博客
05-12 1616
Vue 移动端、PC 端适配可以使用lib-flexible、amfe-flexible、postcss-pxtorem、postcss-px2rem、postcss-px-to-viewport这几个插件。是淘宝手机前端开发团队开发出来的一个开源插件，会自动在 html 的 head 中添加一个 的标签，同时会自动设置 html 的 font-size 为屏幕宽度除以10。
jQuery实现简单实用的H5(手机端)下拉分页加载（所谓的懒加载！！！）
独而不孤
07-13 3640
话不多说，直接码上。 <div> <div>展示内容列表块</div> //now当前页数 num总页数 这些需要在列表初始化的时候计算好，并赋值给此属性 <div class="caseud" now="1" num="2"> ...
jQuery-获取验证码
qq_49246775的博客
12-12 2157
1.选用案例 2.实现思路 3.代码
手机H5页面（文字滚动、适配各种屏幕、jQuery ajax包含cookie）
从入门到进错门
09-30 1710
###手机H5页面 ###文字滚动 使用li标签，通过改变margin-top实现向上滚动。 代码： js: carousel: function() { var items = $('.roll').find('li'); console.log(items); var $itemOne = items.eq(0); var margin_top = 0; ...
jquery分页器插件，已经封装HTML和CSS3样式
10-28
封装了H5、CSS3、jquery代码，方便前端开发者进行页面调用
移动端 jquery+html5 手写签名（横屏）
12-27
用jquery+html5+css3实现移动端的手动签名，横屏签名，完美回显，可直接复用
h5拖动图片验证码js插件
06-15
此插件使用h5的cancas画布，最终封装为jquery插件，因为canvas有跨域问题查看效果请启动server 访问，不要使用文件系统（file:///C:/Users/）访问，使用方式如下： $("#captcha").imgVerifyCode({ imgPath: ...
移动端html5+jQuery图片裁剪插件头像
11-30
html5+jquery以手机相册或相机拍照方式来获取图片，并对图片压缩、缩放、裁剪，与微信上传头像类似，封装了类，配置简单，进入myDemo/index.html可运行，已测试ok。
html5的canvas封装displayer.js.zip
07-18
它本是rocui插件系统的一部分（rocui还未发布，它是一个完整的web ui处理框架，但是它将在不久之后完整发布）但是它现在仍可以作为jquery插件而是用。它参照flash显示对象（sprite）而设计，支持局部坐标系统，以及...
jsbridge.js.zip
05-24
使用 JSBridge 与原生 IOS、Android 进行交互，互传消息，完美封装，vue和react可直接使用
web前端总结之文本超出显示省略号
攻城喵小猫的博客
12-02 3588
web前端总结之文本超出显示省略号 当网页中显示文字过多时，会出现如下样式的文字 文字显示为省略号，当鼠标移上去时显示文字。 这就是文本超出显示省略号。 主要用到了： text-overflow:ellipsis; overflow:hidden; white-space: nowrap; 在标签中添加title=“被省略的文字”，实现鼠标移动到省略号上显示被省略的文字。 效果：...
关于vue项目中js实现轮播功能。
攻城喵小猫的博客
11-30 2416
关于vue项目中js实现轮播功能。 由于项目要求，ui组件库实现不好要的效果，所以，手动写了一个。 先看效果吧 这里左右箭头是可以点击滑动的，类似轮播样式，这里是由于后台返回数据list，一次加载3条 实现方法主要下面介绍 首先是静态页面 &lt;div class="process-box" ref='processBox'&gt; &lt;p&gt;员工历程&lt;/...
基于vue的滚动条组件之----element隐藏组件滚动条scrollbar使用
攻城喵小猫的博客
11-28 1456
基于vue的滚动条组件之----element隐藏组件滚动条scrollbar使用 在项目中，总是需要用到滚动条，但windows浏览器默认的滚动条是很丑的，为了页面美观，可以考虑优化滚动条样式。 vue Element UI官方文档上并没有放出滚动条相关的示例说明，但是实际上是有这么一个组件的，可查看源码。 element-ui隐藏组件scrollbar的使用 &lt;el-scrollbar&...
<h5>标签怎么用jquery
最新发布
06-07
使用 jQuery 操作标签，需要先引入 jQuery 库，然后使用 jQuery 选择器选中对应的标签，再使用 jQuery 提供的方法进行操作。 例如，如果要使用 jQuery 修改一个 h5 标签的内容，可以使用以下代码： ```javascript // 选中 h5 标签，修改其内容 $("h5").text("新的内容"); ``` 这将会选中页面中所有的 h5 标签，并将它们的内容修改为“新的内容”。具体的选择器和方法可以根据实际需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值