input表单美化、子元素scroll父元素容器不跟随滚动JS实现、千位分隔符

原创 448894534 随笔 JavaScript 215阅读 2017-11-21 11:21:46 举报

由于每个的内容都不是很多,就写在一个页面里了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>;
<title>Title</title>
<style>
.wrap{width:100%;height:700px;}
.d1{width:300px;height:400px;overflow: auto;border:1px solid red;}
.ui_button{border-radius:5px;color:#ffffff;background-color:#ffa430;font-size:13px;padding:5px 10px;}
</style>
</head>
<body>
<div class="wrap">
<div class="d1">
<p style="height:60px"></p>
</div>
<p>使用label元素与file控件关联,input file类型控件有一个属性,名为accept。
可以用来指定浏览器接受的文件类型,也就是的那个我们打开系统的选择文件弹框的时候,默认界面中呈现的文件类型。</p>
<label class="ui_button ui_button_primary" for="xFile">上传文件</label>
<form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);" accept="image/"></form>
<!-- 虽然使用accept="image/
"很方便,但是在Chrome浏览器下,可能会有文件选择窗口打开非常慢点问题,因此,如果仅仅是上传图片,建议使用:
accept="image/png, image/jpeg, image/gif, image/jpg" -->
</div>
</body>
<script>
// 方法一:使用正则表达式
console.log(String(123067).replace(/(\d)(?=(\d{3})+$)/g, "$1,"));
//方法二:使用toLocaleString()方法
console.log((2134506145).toLocaleString('en-US'));

$.fn.scrollUnique = function() {//子元素scroll父元素容器不跟随滚动JS实现
return $(this).each(function() {
var eventType = 'mousewheel';
// 火狐是DOMMouseScroll事件
if (document.mozHidden !== undefined) {
eventType = 'DOMMouseScroll';
}
$(this).on(eventType, function(event) {
// 一些数据
var scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = this.clientHeight;

        var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);

        if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
            // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
            this.scrollTop = delta > 0? 0: scrollHeight;
            // 向上滚 || 向下滚
            event.preventDefault();
        }
    });
});

};
$(".d1").scrollUnique();
</script>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复