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

        学前端一定会写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<arguments.length; i++) {
        $("<img />").attr("src", arguments[i]);
    }
}
$(document).ready(function() {
    $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

 
前端js脚本怎么写

 
        4. 测试密码强度
Html代码:
<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>
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脚本代码。想学前端,关注程度知了堂前端培训教学,深厚的教学经验,丰富的实践项目,优厚的高新岗位,无一不在保证你的学习效率。

注:本文部分内容以及图片来源于网络,如网站发布的有关的信息侵犯到您的权益,请及时与我们取得联系删除



热门课程

免费试听

上课方式

开班时间

实战教学·项目驱动

开班计划中
  • 网络安全

    04月22日

  • 安全服务

    04月22日

  • 鸿蒙认证

    04月22日

24小时报名热线

177 1362 3990

预约试学