前端js脚本怎么写？推荐几款常用的js脚本代码

知了堂姐

2024-07-09 11:12:24

0次

学前端一定会写JavaScript脚本，但是很多时候为了方便，通常会使用现成的脚本。Js脚本怎么写？快看这几款常用的js脚本代码。
1.回到顶部JS脚本

$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});

2. 定时刷新部分页面的内容

setInterval(function() {
$("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

3. 预载入图像

$.preloadImages = function() {
    for(var i = 0; i         $("").attr("src", arguments[i]);
    }
}
$(document).ready(function() {
    $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

4. 测试密码强度

Html代码：

Js脚本代码：
$('#pass').keyup(function(e) {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a
-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    if (false == enoughRegex.test($(this).val())) {
        $('#passstrength').html('More Characters');
    } else if (strongRegex.test($(this).val())) {
        $('#passstrength').className = 'ok';
        $('#passstrength').html('Strong!');
    } else if (mediumRegex.test($(this).val())) {
        $('#passstrength').className = 'alert';
        $('#passstrength').html('Medium!');
    } else {
        $('#passstrength').className = 'error';
        $('#passstrength').html('Weak!');
    }
    return true;
});

5. 自适应缩放图像

$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
        ratio = maxHeight / height;
        $(this).css("height", maxHeight);
        $(this).css("width", width * ratio);
        width = width * ratio;
     }
});
//$("#contentpage img").show();
// IMAGE RESIZE
});

前端js脚本怎么写？快看这几款常用的js脚本代码。想学前端，关注程度知了堂前端培训教学，深厚的教学经验，丰富的实践项目，优厚的高新岗位，无一不在保证你的学习效率。

上一篇：零基础学习Java要怎么学？0基础小白学Java这四个

下一篇：正则表达式怎么写？前端常用正则表达式集合