版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://cloud.tencent.com/developer/article/1347600
日常项目用到的及网上收集而来
html的样式font-size可以根据javascript去计算,一般根据设计稿来写原始尺寸,其次通过媒体查询来设置缩放,所以通过相应设备尺寸去做media query设置也可以实现适配,
最常见的是html{font-size: 62.5%}, 因为任何桌面浏览器的默认字体大小都是16px,这样1rem = 10px。常见的响应式查询,可参考网站m.dx.com
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
//判断是否是数组
function isArray(arr) {
return Object.prototype.toString.call(arr).slice(8, -1) === 'Array';
}
function deepClone(obj) {
if(typeof obj !== 'object' || typeof obj !== 'function') {
return obj;
}
var o = isArray(obj) ? [] : {};
for(var i in obj) {
if(obj.hasOwnProperty(i)) {
//递归调用
o[i] = (typeof obj[i] === 'object') ? deepClone(obj[i]) : obj[i];
}
}
return o;
}
function extend(defaultObj, extendObj){
var obj = {};
for(var key in defaultObj) {
if(defaultObj.hasOwnProperty(key)) {
if(extendObj[key] === false || extendObj[key] === 0) {
obj[key] = extendObj[key];
}else{
obj[key] = extendObj[key] || defaultObj[key];
}
}
}
return obj;
}
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
//封装了id,class,tagname所有方法
var get = {
byId: function (id) {
return document.getElementById(id)
},
byClass: function (sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) {
//此处逻辑与&&的判断,当一个为ture时,返回第二个对象
reClass.test(aElem[i].className) && aClass.push(aElem[i]);
}
return aClass
},
byTagName: function (elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
};
//类的获取
function getByClass(oParent, sClass)
//oParent为父节点DOM对象,sClass为需要获取的类
{
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
var re = new RegExp('\\b' + sClass + '\\b', 'i');
var i = 0;
for (i = 0; i < aEle.length; i++) {
if (re.test(aEle[i].className)) {
aResult.push(aEle[i]);
}
}
return aResult;
//此处返回的是一个数组DOM对象
}
var decToHex = function(str) {
var res=[];
for(var i=0;i < str.length;i++)
res[i]=("00"+str.charCodeAt(i).toString(16)).slice(-4);
return "\\u"+res.join("\\u");
}
var hexToDec = function(str) {
str=str.replace(/\\/g,"%");
return decodeURI(str);
}
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !='function'){
window.onload=func;
}
else{
window.onload=function(){
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild === targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
//利用array的join方法,创建指定长度的空数组,用str来拼接数组,不会改变原有数组
function repeatstr(str,n){
return new Array(n+1).join(str);
}
console.log(repeatstr('hi',3));
//方法一:正则法
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
// 这样调用:
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));
//方法二:split拆分法
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];
function add(x) {
var sum = x;
var tmp = function (y) {
sum = sum + y;
return tmp;
};
tmp.toString = function () {
return sum;
};
return tmp;
}
console.log(add(1)(2)(3)); //6
console.log(add(1)(2)(3)(4)); //10
/*首先要一个数记住每次的计算值,所以使用了闭包,在tmp中记住了x的值,第一次调用add(),初始化了tmp,并将x保存在tmp的作用链中,然后返回tmp保证了第二次调用的是tmp函数,后面的计算都是在调用tmp, 因为tmp也是返回的自己,保证了第二次之后的调用也是调用tmp,而在tmp中将传入的参数与保存在作用链中x相加并付给sum,这样就保证了计算*/
/*但是在计算完成后还是返回了tmp这个函数,这样就获取不到计算的结果了,我们需要的结果是一个计算的数字那么怎么办呢,首先要知道JavaScript中,打印和相加计算,会分别调用toString或valueOf函数,所以我们重写tmp的toString和valueOf方法,返回sum的值*/
/*
* 检测对象是否是空对象(不包含任何可读属性)。 //如你上面的那个对象就是不含任何可读属性
* 方法只既检测对象本身的属性,不检测从原型继承的属性。
*/
function isOwnEmpty(obj)
{
for(var name in obj)
{
if(obj.hasOwnProperty(name))
{
return false;
}
}
return true;
};
/*
* 检测对象是否是空对象(不包含任何可读属性)。
* 方法既检测对象本身的属性,也检测从原型继承的属性(因此没有使hasOwnProperty)。
*/
function isEmpty(obj)
{
for (var name in obj)
{
return false;
}
return true;
};
//是否被包含,是返回true,不是返回false
function isContained(a, b){
if(!(a instanceof Array) || !(b instanceof Array)) return false;
if(a.length < b.length) return false;
//把数组转成字符串,通过indexOf来判断
var aStr = a.toString();
console.info(aStr);
for(var i = 0, len = b.length; i < len; i++){
console.info(aStr.indexOf(b[i]));
if(aStr.indexOf(b[i]) == -1) return false;
}
return true;
}
//例子
(function(){
var a = [1,2,3,4,5];
var b = [1,4,3,2];
var c = [1,6];
alert(isContained(a,b));//true
alert(isContained(a,c));//false
})()
提高内联样式style的优先级也需要增加important或者用js设置对象样式增加important属性,这样才能覆盖样式表中的样式
<style>
.c{color:Red !important}
</style>
<div class="c" style="color:#000000 !important">内联样式也增加important,这里就显示黑色的了,而不是红色</div>
通过脚本设置,需要注意的是不能直接设置obj.style.color=’#000000 !important’,而是设置obj.style.cssText=’color:#000000 !important’
function arrSort(a, b){
if (/^\d/.test(a) ^ /^\D/.test(b)) {
return a>b?1:(a==b?0:-1);
}else{
return a>b?-1:(a==b?0:1);
}
}
var pyArray=["a","d","fa","5","t","fw2","a31","b","e","2fs","4","0"];
pyArray.sort(arrSort)
//["a", "a31", "b", "d", "e", "fa", "fw2", "t", "0", "2fs", "4", "5"]
类只会被实例化一次
var Singleton = function(fn) {
var result;
return function() {
return result || (result = fn());
};
};
var CreateMask = Singleton(function() {
var __mask = document.createElement('div');
__mask.className = 'mask';
//...
return document.body.appendChild(__mask);
});
var mask = new CreateMask();