手写常用的javascript函数

// 获取url参数
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;
}// 验证手机号码(strict)
function validPhoneNumber( number ) {if( !number ) return false;number = number.replace( ' ', '' );number = number.replace( '-', '' );if( !/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/i.test( number ) ){if( number.length != 11 ){return false;}}return true;
}// 检查是否是移动端
function detectmob() { if( navigator.userAgent.match(/Android/i)|| navigator.userAgent.match(/webOS/i)|| navigator.userAgent.match(/iPhone/i)|| navigator.userAgent.match(/iPad/i)|| navigator.userAgent.match(/iPod/i)|| navigator.userAgent.match(/BlackBerry/i)|| navigator.userAgent.match(/Windows Phone/i)){return true;}else {return false;}
}function hasClass(elem, cls) {cls = cls || '';if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回falsereturn new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
}function addClass(elem, cls) {if (!hasClass(elem, cls)) {elem.className = elem.className == '' ? cls : elem.className + ' ' + cls;}
}function removeClass(elem, cls) {if (hasClass(elem, cls)) {var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';while (newClass.indexOf(' ' + cls + ' ') >= 0) {newClass = newClass.replace(' ' + cls + ' ', ' ');}elem.className = newClass.replace(/^\s+|\s+$/g, '');}
}function toggleClass(obj,cls){  if(hasClass(obj,cls)){  removeClass(obj, cls);  }else{  addClass(obj, cls);  }  
}  
//格式化参数
function formatParams(data) {var arr = [];for (var name in data) {arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));}return arr.join('&');
}function ajax(options) {options = options || {};options.type = (options.type || "GET").toUpperCase();options.dataType = options.dataType || "json";var params = formatParams(options.data);//创建 - 非IE6 - 第一步if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else { //IE6及其以下版本浏览器var xhr = new ActiveXObject('Microsoft.XMLHTTP');}//接收 - 第三步xhr.onreadystatechange = function () {if (xhr.readyState == 4) {var status = xhr.status;if (status >= 200 && status < 300) {options.success && options.success(JSON.parse(xhr.responseText), xhr.responseXML);} else {options.fail && options.fail(status);}}}//连接 和 发送 - 第二步if (options.type == "GET") {xhr.open("GET", options.url + "?" + params, true);xhr.send(null);} else if (options.type == "POST") {xhr.open("POST", options.url, true);//设置表单提交时的内容类型xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send(params);}
}function toast(content, time) {var toast = document.getElementById('common-toast');// console.log(toast,'finded toast')// console.log(toast);clearTimeout(window.toastTimer);var defaultStyle = 'position: fixed;background-color: rgba(0,0,0,0.8);border-radius: 5px;bottom: 30px;left: 50%;padding: 5px 10px;text-align:center;color: #fff;transform: translateX(-50%);';if(!toast) {var style = document.createElement('style');style.type = 'text/css';style.innerHTML='.common-toast{ -webkit-animation: commontoast .2s;animation: commontoast .2s;}\@-webkit-keyframes commontoast {\0%{transform: translateY(30%) translateX(-50%);opacity: 0.3;}\100%{transform: translateY(0%) translateX(-50%);opacity: 1;}\}\@keyframes commontoast {\0%{transform: translateY(30%) translateX(-50%);opacity: 0.3;}\100%{transform: translateY(0%) translateX(-50%);opacity: 1;}\}\';document.getElementsByTagName('HEAD').item(0).appendChild(style);toast = document.createElement('div');toast.id = 'common-toast';toast.className = 'common-toast';toast.style= defaultStyle;// console.log(toast);toast.innerHTML = content;document.body.appendChild(toast);}else{toast.innerHTML = content;toast.style = defaultStyle;}window.toastTimer = setTimeout(function() {toast.style = 'display: none;';}, time || 2000);
}//确认弹窗
function comfirm(content, ok_cb, cancel_cb) {var comfirm = document.getElementById('common-comfirm');// console.log(toast,'finded toast')// console.log(toast);var template = '<div>\<div class="comform-title"></div>\<div style="padding: .5rem 0;color: #666;">'+content+'</div>\<div class="comfirm-buttons" style="padding: .3rem 0;">\<button class="comfirm-btn comfirm-cancel" id="comfirm-cancel">取消</button>\<button class="comfirm-btn comfirm-ok" id="comfirm-ok">确定</button>\</div>\</div>';var defaultStyle = 'position: fixed;width: 75%;background-color: #fff;border-radius: 5px;top: 50%;left: 50%;padding: 5px 10px;text-align:center;color: #fff;transform: translate(-50%, 50%);';if(!comfirm) {var style = document.createElement('style');style.type = 'text/css';style.innerHTML='.common-comfirm{box-shadow: 1px 1px 3px #ddd; -webkit-animation: commoncomfirm .2s forwards;animation: commoncomfirm .2s forwards;}\@-webkit-keyframes commoncomfirm {\0%{transform: translateY(-45%) translateX(-50%);opacity: 0.3;}\100%{transform: translateY(-50%) translateX(-50%);opacity: 1;}\}\@keyframes commoncomfirm {\0%{transform: translateY(-45%) translateX(-50%);opacity: 0.3;}\100%{transform: translateY(-50%) translateX(-50%);opacity: 1;}\}\.common-comfirm .comfirm-btn{width: 35%;height: .5rem;margin: 0 .2rem;line-height: .5rem;color: #f7bb2a;text-align: center;border: 1px solid #fbdd94;}\';document.getElementsByTagName('HEAD').item(0).appendChild(style);comfirm = document.createElement('div');comfirm.id = 'common-comfirm';comfirm.className = 'common-comfirm';comfirm.style= defaultStyle;// console.log(comfirm);comfirm.innerHTML = template;document.body.appendChild(comfirm);}else{comfirm.innerHTML = template;comfirm.style = defaultStyle;}var $cancel_bt = document.getElementById('comfirm-cancel');var $ok_bt = document.getElementById('comfirm-ok');$cancel_bt.addEventListener('click', function() {comfirm.style = 'display: none;';cancel_cb && cancel_cb();});$ok_bt.addEventListener('click', function() {comfirm.style = 'display: none;';ok_cb && ok_cb();});
}// loader
;(function(){function Loader() {this.init();}var p = Loader.prototype;p.isLoading = false;p.loaderDOM = null;p.timer = null;p.timeOut = 10000;//超时时间10sp.showStyle = 'position: fixed;background-color: rgba(0,0,0,0.8);border-radius: 5px;bottom: 30px;left: 50%;padding: 5px 10px;text-align:center;color: #fff;transform: translateX(-50%);';p.hideStyle = 'display: none';p.init = function() {var style = document.createElement('style');style.type = 'text/css';style.innerHTML='.common-loader{ -webkit-animation: commonloader .2s;animation: commonloader .2s;}\@-webkit-keyframes commonloader {\0%{transform: translateY(30%) translateX(-50%);opacity: 0.3;}\100%{transform: translateY(0%) translateX(-50%);opacity: 1;}\}\@keyframes commonloader {\0%{transform: translateY(30%) translateX(-50%);opacity: 0.3;}\100%{transform: translateY(0%) translateX(-50%);opacity: 1;}\}\.loader{\margin: 0 0 2em;\height: 100px;\width: 20%;\text-align: center;\padding: 1em;\margin: 0 auto 1em;\display: inline-block;\vertical-align: top;\}\svg path,\svg rect{\fill: #FF6700;\}\';document.getElementsByTagName('HEAD').item(0).appendChild(style);loader = document.createElement('div');loader.id = 'common-loader';loader.className = 'common-loader';loader.innerHTML = '<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">\<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">\<animateTransform attributeType="xml"\attributeName="transform"\type="rotate"\from="0 25 25"\to="360 25 25"\dur="0.6s"\repeatCount="indefinite"/>\</path>\</svg>';loader.style= this.hideStyle;document.body.appendChild(loader);this.loaderDOM = loader;}p.show = function(timeOut) {this.timer && clearTimeout(this.timer);this.loaderDOM.style = this.showStyle;this.is_loading = true;var self = this;this.timer = setTimeout(function() {self.hide();}, timeOut || this.timeOut);}p.hide = function() {this.loaderDOM.style = this.hideStyle;this.is_loading = false;}p.isLoading = function() {return this.is_loading;}var loader = new Loader();window.loader = loader;
})();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/123934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux rm命令:删除文件或目录

当 Linux 系统使用很长时间之后&#xff0c;可能会有一些已经没用的文件&#xff08;即垃圾&#xff09;&#xff0c;这些文件不但会消耗宝贵的硬盘资源&#xff0c;还是降低系统的运行效率&#xff0c;因此需要及时地清理。 rm 是强大的删除命令&#xff0c;它可以永久性地删除…

一百九十七、Java——IDEA项目中把多层文件夹拆开显示

一、目的 由于IDEA项目中&#xff0c;默认的是把文件夹连在一起显示&#xff0c;于是为了方便需要把这些连在一起的文件夹拆开&#xff0c;分层显示 如文件夹cn.kgc 二、解决措施 解决方法很简单 &#xff08;一&#xff09;找到IDEA项目上的小齿轮 &#xff08;二&#xf…

基于深度学习的单图像人群计数研究:网络设计、损失函数和监控信号

摘要 https://arxiv.org/pdf/2012.15685v2.pdf 单图像人群计数是一个具有挑战性的计算机视觉问题,在公共安全、城市规划、交通管理等领域有着广泛的应用。近年来,随着深度学习技术的发展,人群计数引起了广泛的关注并取得了巨大的成功。通过系统地回顾和总结2015年以来基于深…

基于STM32的多功能智能密码锁控制设计

**单片机设计介绍&#xff0c;1653基于STM32的多功能智能密码锁控制设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序文档 六、 文章目录 一 概要 基于STM32的多功能智能密码锁控制设计是一种用STM32微控制器开发的系统&#xff0c;用于控制和管理密码…

手机桌面待办事项APP推荐,手机上可使用哪些待办事项APP

生活中&#xff0c;无论你是一名专业人士&#xff0c;学生&#xff0c;还是家庭主妇&#xff0c;总有各种各样的任务等待着你&#xff0c;有时候需要额外的工具来提醒和管理这些待办事项。手机上的待办事项APP软件成为了这个任务的好帮手&#xff0c;为我们提供了快速、方便的方…

前端学习路线指南:从入门到精通【①】

前言 作为一个前端开发者&#xff0c;学习前端技术是必不可少的。然而&#xff0c;由于前端领域的广阔和不断演进的技术栈&#xff0c;对于初学者来说可能会感到困惑。本篇文章将为你提供一个清晰的前端学习路线&#xff0c;帮助你系统地掌握前端开发技能&#xff0c;并成为一名…

spring boot配置ssl(多cer格式)保姆级教程

1. 准备cer格式的证书&#xff1b; 2. 合并cer证书并转化成jks格式的证书 为啥有这一步&#xff0c;因为cer证书配置在spring boot项目中&#xff0c;项目启动不起来。如果有大佬想指导一下可以给我留言&#xff0c;在此先谢过大佬。 1&#xff09;先创建一个jks格式的证…

Kotlin(八) 数据类、单例

目录 一&#xff1a;创建数据类 二&#xff1a;单例类 一&#xff1a;创建数据类 和Java的不同&#xff0c;kotlin的数据类比较简单&#xff0c;New→Kotlin File/Class&#xff0c;在弹出的对话框中输入“Book”&#xff0c;创建类型选择“Data”。如图&#xff1a; 然后编…

Keil Map信息解析

基本功能&#xff1a; 1.在Keil里面&#xff0c;通过App.Map复制所有信息。然后解析剪辑版内容。 2.随意输入一个函数内存地址&#xff0c;即可遍历出该内存地址属于哪个.c或者函数名。或者能遍历出变量。 强化功能&#xff1a; 1.通过Keil5 命令 Save xxxxxxx\1.Hex 0x200173…

使用设计模式省去大量的if-elsef分支

1.测试类 Testpublic void test7() {/*** 使用设计模式前*///模拟入参String name "?";if("张三".equals(name)){System.out.println("按照张三的策略执行的任务!");}else if ("李四".equals(name)){System.out.println("按照李…

为什么我觉得Rust比C++复杂得多?

为什么我觉得Rust比C复杂得多&#xff1f; Rust自学确实有一定门槛&#xff0c;很多具体问题解决起来搜索引擎也不太帮的上忙&#xff0c;会出现卡住的情况&#xff0c;卡的时间长了就放弃了。最近很多小伙伴找我&#xff0c;说想要一些c语言资料&#xff0c;然后我根据自己从…

SpringCloudAlibaba实战-nacos集群部署

写在前面&#xff1a;在学习阶段&#xff0c;我们想快速学习SpringCloudAlibaba功能&#xff0c;但总是花费大量时间跟着视频或博客做组件配置。由于版本的更迭&#xff0c;我们学习时的组件版本很可能和作者的不一致&#xff0c;又或者是各自环境不一&#xff0c;只能一坑又一…

Android14(U)适配攻略

1. 升级编译环境 开发环境 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 准备Flamingo 或者最新Bate 版本的Android Studio 准备Android 14 的设备((https://developer.android.google.cn/about/versions/14/devices?hlzh-cn)) gradle配置 clas…

音视频开发常见问题(四):视频花屏和绿屏

摘要 本文介绍了视频视频花屏/绿屏问题的常见原因&#xff0c;如丢失关键帧、metadata的变化、硬件编解码的兼容性问题和颜色格式不一致问题。以及排查方法和解决策略&#xff0c;包括检查视频数据格式、排查自采集/自渲染模块问题、联系第三方音视频SDK技术支持等。最后&…

kubernets挑战实验一(| pvc | pod | services | rolebinding | context)

参考&#xff1a; https://kubernetes.io/zh-cn/docs/tasks/access-application-cluster/configure-access-multiple-clusters/ Deploy the given architecture diagram for implementing a Jekyll SSG. 1、创建pvc使用,以下条件限制 Storage Request: 1Gi Access modes: Re…

【WSL 2】Windows10 安装 WSL 2,并配合 Windows Terminal 和 VSCode 使用

【WSL 2】Windows10 安装 WSL 2&#xff0c;并配合 Windows Terminal 和 VSCode 使用 1 安装 Windows Terminal2 安装 WSL 23 在 Windows 文件资源管理器中打开 WSL 项目4 在 VSCode 中使用 WSL 24.1 必要准备4.2 从 VSCode 中 Connect WSL4.3 从 Linux 中打开 VSCode 1 安装 W…

✔ ★【备战实习(面经+项目+算法)】 10.29学习

✔ ★【备战实习&#xff08;面经项目算法&#xff09;】 坚持完成每天必做如何找到好工作1. 科学的学习方法&#xff08;专注&#xff01;效率&#xff01;记忆&#xff01;心流&#xff01;&#xff09;2. 每天认真完成必做项&#xff0c;踏实学习技术 认真完成每天必做&…

企业微信接入芋道SpringBoot项目

背景&#xff1a;使用芋道框架编写了一个数据看板功能需要嵌入到企业微信中&#xff0c;方便各级人员实时观看 接入企业微信的话肯定不能像平常pc端一样先登录再根据权限看页面&#xff0c;不然的话不如直接手机浏览器打开登录账号来得更为方便&#xff0c;所以迎面而来面临两…

在CentOS上用yum方式安装MySQL8过程记录

此文参考官方文档一步一步记录安装到正常运行全过程 安装环境&#xff1a;centos7 mysql版本&#xff1a;8.0.35 安装过程主要参考下面两边文章&#xff1a; 1.官方文档 https://dev.mysql.com/doc/refman/8.0/en/linux-installation-yum-repo.html 2.linux yum安装mysql8 安…

Netty 使用和常用组件

简述 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId<version>4.1.42.Final </version><scope>compile</scope> </dependency>Netty 的优势 1、API 使用简单&#xff0c;开发门槛低&a…