常用小组件封装
1、实现点击按钮(验证码的比较多)出现60秒倒计时
参考: http://www.jb51.net/article/76677.htm
<button id="button">获取验证码</button>
/** * @brief 发送验证码倒计时 * @param {string} p1 button或input[type=button]元素的选择器 * @param {string} p2 倒计时时间 * @return "" */ function countdowm(selector, t) { var wait = t; function time(sel) { if (0 == wait) { sel.removeAttr("disabled"); sel.html("获取验证码") wait = 60; } else { sel.attr("disabled", true); sel.html(wait + "s"); wait--; setTimeout(function() { time(sel) }, 1000) } } $(selector).click(function() { var that = this; time($(that)); }); } countdowm(".button", "60");
2、自定义checkbox的勾选样式
参考: http://www.bootcss.com/p/icheck/
http://www.haorooms.com/post/css_mh_ck_radio
3、模态框(遮罩层)
参考:https://blog.csdn.net/zl_best/article/details/62423802
点击空白处关闭模态框:思路,1、阻止模态框内容区域的事件冒泡(内容区域本来是不需要点击事件的,但是点击内容区域事件会传递下去;为了阻止传递下去,只能给内容加一个点击事件,阻止事件传递了。);
4、点击标签滚动条缓慢滚动(即滚动条也有动画效果)
var v = $(".JFullContainer"); $(".mod-mousewheel").on("click", function(i) { i.preventDefault(); var e = v.offset().top; //标签顶部距离文档顶部的高度使用 offset() 获取 $("body, html").animate({ // 滚动条的动画的设置对象选择body,html。而不是window scrollTop: e }) });