前端常用代码整理(不断更新中)— js,jquery篇

1.随机函数代码
 function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}
2.倒计时代码
      let now = +new Date()// 2. 得到指定时间的时间戳let last = +new Date('这里写想要达到的时间')// 3. (计算剩余的毫秒数) / 1000 === 剩余的秒数let count = (last - now) / 1000// console.log(count)// 4. 转换为时分秒// h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时let h = parseInt(count / 60 / 60 % 24)h = h < 10 ? '0' + h : h// m = parseInt(总秒数 / 60 % 60);     //   计算分数let m = parseInt(count / 60 % 60)m = m < 10 ? '0' + m : m// s = parseInt(总秒数 % 60); //   计算当前秒数let s = parseInt(count % 60);s = s < 10 ? '0' + s : sconsole.log(h, m, s)
3.精确显示时间代码
let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']let div = document.querySelector('div')// 先调用,就省去了1秒的空白期getTime()setInterval(getTime, 1000)function getTime() {// 1. 实例化时间对象 一定写到定时器里面才可以额let date = new Date()let year = date.getFullYear()let month = date.getMonth() + 1let date1 = date.getDate()let hour = date.getHours()let min = date.getMinutes()let sec = date.getSeconds()let day = date.getDay()div.innerHTML = `今天是: ${year}年${month}月${date1}日 ${hour}:${min}:${sec} ${arr[day]}`}
 4.鼠标滚动事件
$('#content').on("mousewheel DOMMouseScroll", function (event) { // chrome & ie || // firefoxvar delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1)); if (delta > 0) { // 向上滚动console.log('mousewheel top');} else if (delta < 0) {// 向下滚动console.log('mousewheel bottom');} 
});
5.js时间戳毫秒格式化 
function formatDate(now) { var y = now.getFullYear();var m = now.getMonth() + 1; // 注意js里的月要加1 var d = now.getDate();var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds();return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s; 
} 
var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);
console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020
console.log(formatDate(nowDate));
 6.验证码倒计时
<!-- dom -->
<input id="send" type="button" value="发送验证码">
// 原生js版本
var times = 60, // 临时设为60秒timer = null;document.getElementById('send').onclick = function () {// 计时开始timer = setInterval(function () {times--;if (times <= 0) {send.value = '发送验证码';clearInterval(timer);send.disabled = false;times = 60;} else {send.value = times + '秒后重试';send.disabled = true;}}, 1000);
}// jQuery版本
var times = 60,timer = null;
$('#send').on('click', function () {var $this = $(this);// 计时开始timer = setInterval(function () {times--;if (times <= 0) {$this.val('发送验证码');clearInterval(timer);$this.attr('disabled', false);times = 60;} else {$this.val(times + '秒后重试');$this.attr('disabled', true);}}, 1000);
});
 7.获取到鼠标在页面的坐标
$('#myImage').click(function(event){//获取鼠标在图片上的坐标 console.log('X:' + event.offsetX+'\n Y:' + event.offsetY); //获取元素相对于页面的坐标 console.log('X:'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});
8.h5全屏
function fullscreen(element) {if (element.requestFullscreen) {element.requestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();}
}fullscreen(document.documentElement);

author:冰海恋雨 

 

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

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

相关文章

【Linux】缓冲区与缓冲区的刷新策略

目录 1.缓冲区基础 1.1缓冲区的刷新策略 1.1.1三种刷新策略 1.1.2.两种强制刷新策略 2.用户级语言层缓冲区 2.1.默认在显示器输出 2.2.重定向到文件输出 2.3.write调用没有显示两份的原因 3.模拟实现文件缓冲区 3.1 myFileBuffer.h 3.2 myFileBuffer.c 4.系统内核缓…

Linux操作系统运维-Docker的基础知识梳理总结

Linux操作系统运维-Docker的基础知识梳理总结 docker用来解决不同开发人员软件调试时环境不统一的问题&#xff0c;保证了程序调试时运行环境的一致性。docker的设计理念便是一处镜像&#xff0c;处处运行&#xff0c;即通过产生用户软件&#xff0c;运行环境及其运行配置的统一…

回归预测 | Matlab实现ABC-BP人工蜂群算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现ABC-BP人工蜂群算法优化BP神经网络多变量回归预测 目录 回归预测 | Matlab实现ABC-BP人工蜂群算法优化BP神经网络多变量回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab实现ABC-BP人工蜂群算法优化BP神经网络多变量回归预测&#x…

Linux下centos操作系统安装Mysql8.0过程及踩坑填补

我自己有一台服务器&#xff0c;之前安装的是MySQL5.5&#xff0c;现在我想升级为MySQL8.0&#xff0c;于是我干了以下操作,既有踩坑又有干货&#xff1a; 1.先卸载MySQL&#xff1b; 2.删除跟MySQL相关文件&#xff1b; 3.安装新的MySQL8.0版本&#xff08;这里踩了一个坑&…

Spring- FactoryBean接口中的getObject()方法

目录 一、Spring框架介绍 二、FactoryBean接口是什么 三、getObject()方法如何使用 一、Spring框架介绍 Spring框架是一个轻量级的、非侵入式的Java企业级应用开发框架&#xff0c;以IoC&#xff08;控制反转&#xff09;和AOP&#xff08;面向切面编程&#xff09;为核心思…

springboot集成easypoi导出多sheet页

pom文件 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.1.0</version> </dependency> 导出模板&#xff1a; 后端代码示例&#xff1a; /*** 导出加油卡进便利店大额审批列…

云计算 - 弹性计算技术全解与实践

一、引言 在过去的十年里&#xff0c;云计算从一个前沿概念发展为企业和开发者的必备工具。传统的计算模型通常局限于单一的、物理的位置和有限的资源&#xff0c;而云计算则通过分布式的资源和服务&#xff0c;为计算能力带来了前所未有的"弹性"。 弹性&#xff1a;…

axios get 请求 url 转码 空格转成+,导致请求失败(前端解决)

问题 GET 请求参数&#xff1a; URL-encoded 后&#xff1a; 浏览器将空格转成了&#xff0c;导致服务报错&#xff0c;返回 400。 解决 在请求拦截器中&#xff0c;对 params 进行处理。 axios.interceptors.request.use((config) > {let url config.url;if (config…

ES监控方法以及核心指标

文章目录 1. 监控指标采集1.1 部署elasticsearch_exporter1.2 prometheus采集elasticsearch_exporter的暴露指标1.3 promethues配置告警规则或者配置grafana大盘 2. 核心告警指标2.1 es核心指标2.2 es容量模型建议 3. 参考文章 探讨es的监控数据采集方式以及需要关注的核心指标…

python-自动化篇-办公-一键将word中的表格提取到excel文件中

文章目录 代码 工作中&#xff0c;经常需要将Word文档中的表格粘贴到Excel文件中&#xff0c;以便汇总及分析。一个一个复制粘贴&#xff0c;非常不方便&#xff0c;还是Python自动化操作&#xff0c;省心省力。要求如下图所示&#xff0c;即将word中的所有表格&#xff0c;转存…

闲聊电脑(6)装个 Windows(二)

闲聊电脑&#xff08;6&#xff09;装个 Windows&#xff08;二&#xff09; 夜深人静&#xff0c;万籁俱寂&#xff0c;老郭趴在电脑桌上打盹&#xff0c;桌子上的小黄鸭和桌子旁的冰箱又开始窃窃私语…… 小黄鸭&#xff1a;冰箱大哥&#xff0c;上次说的镜像文件到底长啥样…

VMware虚拟机安装openEuler系统(一)(2024)

目录 一、下载ISO镜像 二、开始创建虚拟机 通过实践是学习openEuler开源Linux系统的最佳方式。因此我们首先得搭建一个openEuler实战环境&#xff0c;文章是在Windows系统上使用VMware Workstation虚拟化软件&#xff0c;安装和学习openEuler开源Linux操作系统。 使用虚拟机…

【wu-lazy-cloud-network】Java自动化内网穿透

项目介绍 wu-lazy-cloud-network 是一款基于&#xff08;wu-framework-parent&#xff09;孵化出的项目&#xff0c;内部使用Lazy ORM操作数据库&#xff0c;主要功能是网络穿透&#xff0c;对于没有公网IP的服务进行公网IP映射 使用环境JDK17 Spring Boot 3.0.2 功能 1.内网…

算法day12

算法day12 二叉树理论基础114 二叉树的前序遍历145 二叉树的后序遍历94 二叉树的中序遍历迭代法 二叉树理论基础 直接看代码随想录就完事了&#xff0c;之前考研也学过&#xff0c;大概都能理解 我这里就说说代码层面的。 二叉树的存储&#xff1a; 1、链式存储&#xff1a;这…

基础面试题整理6之Redis

1.Redis的应用场景 Redis支持类型&#xff1a;String、hash、set、zset、list String类型 hash类型 set类型 zset类型 list类型 一般用作缓存&#xff0c;例如 如何同时操作同一功能 2.redis是单线程 Redis服务端(数据操作)是单线程&#xff0c;所以Redis是并发安全的,因…

Mysql MGR搭建

一、架构说明 1.1 架构概述 MGR(单主)VIP架构是一种分布式数据库架构&#xff0c;其中数据库系统采用单主复制模式&#xff0c; 同时引入虚拟IP(VIP)来提高可用性和可扩展性。 这种架构结合了传统主从复制和虚拟IP技术的优势&#xff0c;为数据库系统提供了高可用、 高性能和…

十分钟GIS——geoserver+postgis+udig从零开始发布地图服务

1数据库部署 1.1PostgreSql安装 下载到安装文件后&#xff08;postgresql-9.2.19-1-windows-x64.exe&#xff09;&#xff0c;双击安装。 指定安装目录&#xff0c;如下图所示 指定数据库文件存放目录位置&#xff0c;如下图所示 指定数据库访问管理员密码&#xff0c;如下图所…

uniapp canvas游标卡尺效果

效果 根据公司业务仿照写的效果。原项目从微信小程序转uniapp,未测试该效果在android端效果。 uniapp直接使用canvas不可做子组件,否则无效果显示,其次显示时要考虑页面渲染超时的问题。 如效果所见,可以设置取值精度。 gitee地址:project_practice: 项目练习 - Gitee.…

用python编写爬虫,爬取房产信息

题目 报告要求 工程报告链接放在这里 https://download.csdn.net/download/Samature/88816284使用 1.安装jupyter notebook 2.用jupyter notebook打开工程里的ipynb文件&#xff0c;再run all就行 注意事项 可能遇到的bug 暂无&#xff0c;有的话私信我

Java 中使用多线程的方式有哪些

在 Java 中&#xff0c;使用多线程主要有以下几种方式&#xff1a; 实现 Runnable 接口&#xff1a;这是实现多线程的一种方式。一个类实现 Runnable 接口后&#xff0c;就意味着它是一个线程的执行对象。当一个线程启动时&#xff0c;需要一个与之关联的 Runnable 对象。 publ…