前端开发常用片段

编程语言 2019-06-11 03:02:20 阅读次数: 0

一、预加载图像

如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。

$.preloadImages = function () {
    for (var i = 0; i < argument.length; i ++) {
        $('<imag>').attr('src', argument[i]);
    }
};
$.preloadImages('img/a.png', 'img/b.png');

二、检查图像是否加载

有时为了继续脚本，你可能需要检查图像是否全部加载完毕。

$('img').load(function () {
    console.log('image load succeed');
});
//你也可以使用 ID 或 CLASS 替换<img> 标签来检查某个特定的图像是否被加载。

三、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你。

$('img').on('error', function () {
    if(!$(this).hasClass('broken-image')){
        $(this).prop('src', 'img/a.png').addClass('broken-image');
    }
});

四、悬停切换

当用户鼠标悬停在可点击的元素上时，可添加类到元素中，反之则移除类。

$(selector).hover(function () {
    $(this).addClass('hover');
}),function () {
    $(this).removeClass('hover');
};
//或
$(selector).hover(function () {
    $(this).toggleClass('hover');
});

五、淡入淡出/显示隐藏

$('.btn').click(function () {
    $('.element').fadeToggle('slow');
});
$('.btn').click(function () {
    $('.element').slideToggle('slow');
});

六、鼠标滚轮

$('#content').on("mousewheel DOMMouseScroll", function (event) {
    // chrome & ie || // firefox
    var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
        (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));  
    
    if (delta > 0) {
        console.log('mousewheel top');
    } else if (delta < 0) {
        console.log('mousewheel bottom');
    }
});

七、鼠标坐标

1、JavaScript实现

<body>
	X:<input id="xxx" type="text" /> 
	Y:<input id="yyy" type="text" />
</body>
<script>
	function mousePosition(ev){
	    if(ev.pageX || ev.pageY){
	        return {x:ev.pageX, y:ev.pageY};
	    }
	    return {
	        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
	        y:ev.clientY + document.body.scrollTop - document.body.clientTop
	    };
	}
	 
	function mouseMove(ev){
	    ev = ev || window.event;
	    var mousePos = mousePosition(ev);
	    document.getElementById('xxx').value = mousePos.x;
	    document.getElementById('yyy').value = mousePos.y;
	}
	document.onmousemove = mouseMove;
</script>

2、jQuery实现

$('#ele').click(function(event){
    //获取鼠标在图片上的坐标
    console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);
    
    //获取元素相对于页面的坐标
    console.log('X：' + $(this).offset().left + '\n Y:'+$(this).offset().top);
});

八、禁止移动端浏览器页面滚动

1、HTML实现

<body ontouchmove="event.preventDefault()" >

2、JavaScript实现

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
});

九、阻止默认行为

// JavaScript
document.getElementById('btn').addEventListener('click', function (event) {
    event = event || window.event；
    if (event.preventDefault){
        // W3C
        event.preventDefault();
    } else{
        // IE
        event.returnValue = false;
    }
}, false);
 
// jQuery
$('#btn').on('click', function (event) {
    event.preventDefault();
});

十、阻止冒泡

// JavaScript
document.getElementById('btn').addEventListener('click', function (event) {
    event = event || window.event；
    if (event.stopPropagation){
        // W3C
        event.stopPropagation();
    } else{
        // IE
        event.cancelBubble = true;
    }
}, false);
 
// jQuery
$('#btn').on('click', function (event) {
    event.stopPropagation();
});

十一、检测浏览器是否支持svg

function isSupportSVG() {
    var SVG_NS = 'http://www.w3.org/2000/svg';
    return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}
 
console.log(isSupportSVG());

十二、检测浏览器是否支持canvas

function isSupportCanvas() {
    if(document.createElement('canvas').getContext){
        return true;
    }else{
        return false;
    }
}
 
console.log(isSupportCanvas());

十三、检测是否是微信浏览器

function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)==“micromessenger”) {
return true;
} else {
return false;
}
}

alert(isWeiXinClient());

十四、检测是否移动端及浏览器内核

var browser = {
    versions: function() {
        var u = navigator.userAgent;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
            iPhone: u.indexOf('iPhone') > -1 , //iPhone
            iPad: u.indexOf('iPad') > -1, //iPad
            webApp: u.indexOf('Safari') > -1 //Safari
        };
    }
}
 
if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
    alert('移动端');
}

十五、检测是否电脑端/移动端

var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        var sUserAgent = navigator.userAgent;
        return {
        trident: u.indexOf('Trident') > -1,
        presto: u.indexOf('Presto') > -1,
        isChrome: u.indexOf("chrome") > -1,
        isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
        isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
        webKit: u.indexOf('AppleWebKit') > -1,
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
        mobile: !!u.match(/AppleWebKit.*Mobile.*/),
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
        iPhone: u.indexOf('iPhone') > -1,
        iPad: u.indexOf('iPad') > -1,
        iWinPhone: u.indexOf('Windows Phone') > -1
        };
    }()
}
if(browser.versions.mobile || browser.versions.iWinPhone){
    window.location = "http:/www.baidu.com/m/";
}

十六、检测浏览器

function getInternet(){    
    if(navigator.userAgent.indexOf("MSIE")>0) {    
      return "MSIE";       //IE浏览器  
    }  
 
    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){    
      return "Firefox";     //Firefox浏览器  
    }  
 
    if(isSafari=navigator.userAgent.indexOf("Safari")>0) {    
      return "Safari";      //Safan浏览器  
    }  
 
    if(isCamino=navigator.userAgent.indexOf("Camino")>0){    
      return "Camino";   //Camino浏览器  
    }  
    if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){    
      return "Gecko";    //Gecko浏览器  
    }    
}

十七、强制移动端页面横屏显示

$( window ).on( "orientationchange", function( event ) {
    if (event.orientation=='portrait') {
        $('body').css('transform', 'rotate(90deg)');
    } else {
        $('body').css('transform', 'rotate(0deg)');
    }
});
$( window ).orientationchange();

十八、电脑端页面全屏显示

function fullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}
 
fullscreen(document.documentElement);

十九、获得/失去焦点

1、JavaScript实现

<body>
	<input id="i_input" type="text" value="会员卡号/手机号"/>
</body>
<script>
// JavaScript
	window.onload = function(){
	    var oIpt = document.getElementById("i_input");
	    if(oIpt.value == "会员卡号/手机号"){
	        oIpt.style.color = "#888";
	    }else{
	        oIpt.style.color = "#000";
	    };
	    oIpt.onfocus = function(){
	        if(this.value == "会员卡号/手机号"){
	            this.value="";
	            this.style.color = "#000";
	            this.type = "password";
	        }else{
	            this.style.color = "#000";
	        }
	    };
	    oIpt.onblur = function(){
	        if(this.value == ""){
	            this.value="会员卡号/手机号";
	            this.style.color = "#888";
	            this.type = "text";
	        }
	    };
	}
</script>

2、jQuery实现

<body>
	<input type="text" class="oldpsw" id="showPwd" value="请输入您的注册密码"/>
	<input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>
</body>

<script>
	// jQuery
	$("#showPwd").focus(function() {
	    var text_value=$(this).val();
	    if (text_value =='请输入您的注册密码') {
	        $("#showPwd").hide();
	        $("#password").show().focus();
	    }
	});
	$("#password").blur(function() {
	    var text_value = $(this).val();
	    if (text_value == "") {
	        $("#showPwd").show();
	        $("#password").hide();
	    }
	});
</script>

二十、获取上传文件大小

<body>
	<input type="file" id="filePath" onchange="getFileSize(this)"/>
</body>
<script>
	// 兼容IE9低版本
	function getFileSize(obj){
	    var filesize;
	    if(obj.files){
	        filesize = obj.files[0].size;
	    }else{
	        try{
	            var path,fso;
	            path = document.getElementById('filePath').value;
	            fso = new ActiveXObject("Scripting.FileSystemObject");
	            filesize = fso.GetFile(path).size;
	        }
	        catch(e){
	            // 在IE9及低版本浏览器，如果不容许ActiveX控件与页面交互，点击了否，就无法获取size
	            console.log(e.message); // Automation 服务器不能创建对象
	            filesize = 'error'; // 无法获取
	        }
	    }
	    return filesize;
	}
</script>

二十一、限制上传文件类型

1、高版本浏览器

<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf"/>

2、限制图片

<input type="file" class="file" value="上传" accept="image/*">

3、低版本浏览器

<input type="file" id="filePath" onchange="limitTypes()">

/* 通过扩展名，检验文件格式。
* @parma filePath{string} 文件路径
* @parma acceptFormat{Array} 允许的文件类型
* @result 返回值{Boolen}：true or false
*/
 
function checkFormat(filePath,acceptFormat){
    var resultBool= false,
        ex = filePath.substring(filePath.lastIndexOf('.') + 1);
        ex = ex.toLowerCase();
        
    for(var i = 0; i < acceptFormat.length; i++){
    　　if(acceptFormat[i] == ex){
            resultBool = true;
            break;
    　　}
    }
    return resultBool;
};
        
function limitTypes(){
    var obj = document.getElementById('filePath');
    var path = obj.value;
    var result = checkFormat(path,['bmp','jpg','jpeg','png']);
    
    if(!result){
        alert('上传类型错误，请重新上传');
        obj.value = '';
    }
}

二十二、正则表达式

//验证邮箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
 
//验证手机号
/^1[3|5|8|7]\d{9}$/
 
//验证URL
/^http:\/\/.+\./
 
//验证身份证号码
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
 
//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
 
//匹配中文字符
/[\u4e00-\u9fa5]/
 
//匹配双字节字符(包括汉字)
/[^\x00-\xff]/

二十三、限制字符数

<body>
	<input id="txt" type="text">
</body>
<script>
	//字符串截取
	function getByteVal(val, max) {
	    var returnValue = '';
	    var byteValLen = 0;
	    for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
	        returnValue += val[i];
	    }
	    return returnValue;
	}
	 
	$('#txt').on('keyup', function () {
	    var val = this.value;
	    if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {
	        this.value = getByteVal(val, 14);
	    }
	});
</script>

二十四、验证码倒计时

1、JavaScript实现

<body>
	<input id="send" type="button" value="发送验证码">
</body>
<script>
	// JavaScript
	var times = 60, // 时间设置60秒
	timer = null;
	 
	document.getElementById('send').onclick = function () {
	 	// 计时开始
	 	timer = setInterval(function () {
	 		times--;
		 	if (times <= 0) {
	 			send.value = '发送验证码';
	 			clearInterval(timer);
	 			send.disabled = false;
	 			times = 60;
		 	} else {
				send.value = times + '秒后重试';
				send.disabled = true;
			 }
	 	}, 1000);
	}
</script>

2、jQuery实现

var times = 60,
    timer = null;
$('#send').on('click', function () {
    var $this = $(this);
    // 计时开始
    timer = setInterval(function () {
        times--;
        if (times <= 0) {
            $this.val('发送验证码');
            clearInterval(timer);
            $this.attr('disabled', false);
            times = 60;
        } else {
            $this.val(times + '秒后重试');
            $this.attr('disabled', true);
        }
    }, 1000);
});

二十五、时间倒计时

<body>
	<p id="_lefttime"></p>
</body>
<script>
	var times = 60,
	    timer = null;
	$('#send').on('click', function () {
	    var $this = $(this);
	    // 计时开始
	    timer = setInterval(function () {
	        times--;
	        if (times <= 0) {
	            $this.val('发送验证码');
	            clearInterval(timer);
	            $this.attr('disabled', false);
	            times = 60;
	        } else {
	            $this.val(times + '秒后重试');
	            $this.attr('disabled', true);
	        }
	    }, 1000);
	});
</script>

二十六、倒计时跳转

<body>
	<div id="showtimes"></div><div id="showtimes"></div>
</body>
<script>
// 设置倒计时秒数  
	var t = 10;  
	 
	// 显示倒计时秒数  
	function showTime(){  
	    t -= 1;  
	    document.getElementById('showtimes').innerHTML= t;  
	 
	    if(t==0){  
	        location.href='error404.asp';  
	    }  
	 
	    //每秒执行一次 showTime()  
	    setTimeout("showTime()",1000);  
	}  
	 
	showTime();
</script>

二十七、时间戳、毫秒格式化

function formatDate(now) {
    var y = now.getFullYear();
    var m = now.getMonth() + 1; // 注意 JavaScript 月份+1
    var d = now.getDate();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    
    return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}
 
var nowDate = new Date(1442978789184);
 
alert(formatDate(nowDate));

二十八、当前日期

var calculateDate = function(){
 
    var date = new Date();
    var weeks = ["日","一","二","三","四","五","六"];
 
    return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
    date.getDate()+"日 星期"+weeks[date.getDay()];
}
 
$(function(){
    $("#dateSpan").html(calculateDate());
});

二十九、判断周六/周日

<body>
	<p id="text"></p>
</body>
<script>
	function time(y,m){
	    var tempTime = new Date(y,m,0);
	    var time = new Date();
	    var saturday = new Array();
	    var sunday = new Array();
	    for(var i=1;i<=tempTime.getDate();i++){
	        time.setFullYear(y,m-1,i);
	        var day = time.getDay();
	        if(day == 6){
	            saturday.push(i);
	        }else if(day == 0){
	            sunday.push(i);
	        }
	    }
	    var text = y + "年" + m + "月份" + "<br />"
	                + "周六：" + saturday.toString() + "<br />"
	                + "周日：" + sunday.toString();
	    document.getElementById("text").innerHTML = text;
	}
	time(2018,5);
</script>

三十、AJAX调用错误处理

当 Ajax 调用返回 404 或 500 错误时，就执行错误处理程序。如果没有定义处理程序，其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序

$(document).ajaxError(function (e, xhr, settings, error) {
    console.log(error);
});

猜你喜欢

转载自blog.csdn.net/yanyihan16/article/details/90670253
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022