如何自定义滚动条的样式(Chrome有效)

目前各种浏览器自带的滚动条的样式很不美观,而Google Chrome浏览器为webkit内核,提供了对滚动条样式的自定义功能,虽然对其他内核的浏览器没有效果,但是聊胜于无,况且现在Chrome的用户还是非常高的。 示例: 下面是简单的实现代码: /* 定义滚动条基本样式 */ ::-webkit-scrollbar { width: 10px; /* 垂直滚动条的宽度 */ height: 10px; /* 水平滚动条的高度 */ background-color: #f5f5f5; /* 滚动条的背景色 */ } /* 定义滚动条轨道 */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 102, 153, 0.3); /* 内阴影 */ border-radius: 10px; background-color: #f5f5f5; } /* 定义滑块 */ ::-webkit-scrollbar-thumb { border-radius...
阅读全文

如何将URL参数转成对象(JS)

比如URL是http://www.***.com/product.html?id=1&type=2,那么如何使用Javascript将URL参数转成对象? 方式一:正则实现将URL参数转成对象: console.log(getParameters()); console.log(getParameterValueByName("type")); function getParameterValueByName(name) { return getParameters()[name]; } function getParameters() { var parameters = {}; var search = window.location.search.substring(1); var pattern = /(\w+)=(\w+)/ig; search.replace(pattern, function(pair, name, value){ parameters[name] = value; }); return parameters; } 方式二:...
阅读全文

H5实现打开APP(Android、iOS)

手机浏览器中打开一个H5页面,点击一个按钮,如果用户安装了App就打开该App,否则进入App下载页面。 <button type="button" onclick="openApp();">打开APP</button> function openApp() { var urlSchema = [Schema]://[URL]; var androidDownloadUrl = 'http://***'; var iOSDownloadUrl = 'itms-apps://www.apple.com/****'; // 获取当前浏览器用于 HTTP 请求的用户代理头的值 var ua = navigator.userAgent.toLowerCase(); if(/micromessenger/.test(ua)) { // 微信 } else { var downloadUrl; if(/iphone|ipad|ipod/.test(ua)) { // iOS downloadUrl = iO...
阅读全文

Bootstrap Modal 模态框的简单封装

把 Bootstrap 的模态框简单的封装了一下,在这里做个记录,以备不时之需。 1、HTML <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">模态框</h4> <...
阅读全文