前端常用代码整理(不断更新中)— 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 : s
      console.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() + 1
            let 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 || // firefox
  var 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:冰海恋雨 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何在 Linux 中安装 s3cmd 并管理 Amazon s3 存储桶

概述 S3&#xff0c; – 简单存储服务- 是亚马逊的存储服务&#xff0c;为 IT 团队提供一种安全、可扩展且可靠的方式来存储和检索云上的文件和文件夹。 S3 可确保数据在需要时可用并随着需求的增长而扩展&#xff0c;从而帮助您充分利用数据。 通常&#xff0c;在登录到您的…

RabbitMQ-5.消费者的可靠性

消费者的可靠性 5.消费者的可靠性5.1.消费者确认机制5.2.失败重试机制5.3.失败处理策略5.4.业务幂等性5.4.1.唯一消息ID5.4.2.业务判断 5.5.兜底方案 5.消费者的可靠性 当RabbitMQ向消费者投递消息以后&#xff0c;需要知道消费者的处理状态如何。因为消息投递给消费者并不代表…

【数据结构与算法】堆 / 堆排序 / TopK问题(Heap)

文章目录 1.堆2.C语言实现堆2.1 堆结构与基本操作2.2 其它辅助操作2.3 堆的基本操作2.3.1 插入2.3.2 删除 3. 堆排序4. TopK5. 所有代码 1.堆 堆总是一棵完全二叉树&#xff0c;而完全二叉树更适合使用**顺序结构&#xff08;数组&#xff09;**存储&#xff0c;完全二叉树前h…

阿里云企业用户2核4G5M固定带宽199元一年,续费不涨价

2024年2月阿里云服务器租用价格表更新&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核…

Echarts统计用户近七日走量趋势:前后端实现

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&#xff0c;CSDN博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法 &#x1f492; 公众号&#xff1a;知识浅谈 &#x1f525;网站…

嵌入式学习Day14 C语言 --- 位运算

位运算 注意&#xff1a;符号位也遵循这个规则 一、按位与(&) 运算规则&#xff1a;一假则假 int a 0x33;a & 0x55;0011 00110101 0101 &----------0001 0001 //0x11 二、按位或(|) 运算规则&#xff1a;一真则真 int a 0x33;a |0x55;0011 00110101 0101 |…

STM32Cubmax stm32f103zet6 SPI通讯

一、基本概念 SPI 是英语 Serial Peripheral interface 的缩写&#xff0c;顾名思义就是串行外围设备接口。是 Motorola 首先在其 MC68HCXX 系列处理器上定义的。 SPI 接口主要应用在 EEPROM&#xff0c; FLASH&#xff0c;实时时 钟&#xff0c; AD 转换器&#xff0c;还有数…

GLSL ES 1.0

GLSL ES 概述 写在前面 程序是大小写敏感的每一个语句都应该以英文分号结束一个shader必须包含一个main函数&#xff0c;该函数不接受任何参数&#xff0c;并且返回voidvoid main() { }数据值类型 GLSL支持三种数据类型&#xff1a; 整型浮点型&#xff1a;必须包含小数点&…

eclipse使用google的Java代码格式

插件下载地址 1.下载eclipse的插件 2.下载的jar包放到eclipse安装目录的dropins文件夹 D:\install_package\STS\sts-4.10.0.RELEASE\dropins&#xff13;.重启后设置 eclipse - windows - preference - java - code style - formatter -

Excel——合并计算

1.表格的合并计算&#xff08;单张表格/多个表格&#xff09; Q&#xff1a;请统计两个表格中各商品的总销量和总销售额&#xff0c;将结果放置在下方任意位置。 A&#xff1a;选择一个需要将合并计算数据放置区域的空白单元格 选择【数据】——【合并计算】&#xff0c;【函…

Linux安装Java

yum安装 下面命令直接复制粘贴一件安装java17 yum list installed | grep java #查看已经安装的javayum remove java* -y #移除现在系统已经安装的javayum list | grep java-17 #查看安装java17yum install -y java-17-openjdk #安装java17此处可…

flink反压及解决思路和实操

1. 反压原因 反压其实就是 task 处理不过来&#xff0c;算子的 sub-task 需要处理的数据量 > 能够处理的数据量&#xff0c;比如&#xff1a; 当前某个 sub-task 只能处理 1w qps 的数据&#xff0c;但实际上到来 2w qps 的数据&#xff0c;但是实际只能处理 1w 条&#…

JVM 性能调优- 五种内存溢出(5)

在介绍之前先简单介绍下 直接内存(Direct Memory)和堆内存(Heap Memory): 关系: 直接内存并不是Java虚拟机的一部分,它是通过Java的NIO库中的ByteBuffer来分配和管理的。直接内存通常由操作系统的本地内存(Native Memory)提供支持。堆内存是Java虚拟机的一部分,用于存…

裸机开发及开发环境搭建

ARM 的裸机开发&#xff0c;也就是不带操作系统开发&#xff0c;就和我们开发 STM32 一样&#xff0c;如果 有 STM32 开发经验的话学起本篇会很容易 1 、裸机开发是了解所使用的 CPU 最直接、最简单的方法&#xff0c;裸机开发是直接操作 CPU 的寄存器。 Linux 驱动开发…

人工智能 | 深度学习的进展

深度学习的进展 深度学习是人工智能领域的一个重要分支&#xff0c;它利用神经网络模拟人类大脑的学习过程&#xff0c;通过大量数据训练模型&#xff0c;使其能够自动提取特征、识别模式、进行分类和预测等任务。近年来&#xff0c;深度学习在多个领域取得了显著的进展&#…

React+Antd+tree实现树多选功能(选中项受控+支持模糊检索)

1、先上效果 树型控件&#xff0c;选中项形成一棵新的树&#xff0c;若父选中&#xff0c;子自动选中&#xff0c;子取消&#xff0c;父不取消&#xff0c;子选中&#xff0c;所有的父节点自动取消。同时支持模糊检索&#xff0c;会检索出所有包含该内容的关联节点。 2、环境准…

Python数据可视化库之ggplot使用详解

概要 数据可视化是数据分析和数据沟通的关键部分。Python 作为一门强大的数据科学和数据分析工具,提供了多种数据可视化库,其中之一就是 ggplot。ggplot 是一个基于 ggplot2 的 Python 数据可视化库,它可以创建精美且高度可定制的图表,以更好地理解和传达数据。本文将深入…

spring boot整合 cache 以redis服务 处理数据缓存 便捷开发

我们常规开发中 就是程序去数据库取数据 然后返回给客户端 但是 如果有些业务业务量非常庞大 不断访问数据库 性能就会非常糟糕 从而造成不好的用户体验 那么 我们自然就可以将数据查到缓存中 然后 用户访问 从缓存中取 这样就会大大提高用户的访问效率 之前 我的文章 java …

【算法设计与分析】求根节点到叶节点数字之和

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 给你一个二叉树的根节点 root &#xff0c;树中每个节点都存放有一个 0 到 9 之间的数字。 每条从根节点到叶节点的路径都代表一个数…

【数据结构】二叉树的三种遍历(非递归讲解)

目录 1、前言 2、二叉树的非递归遍历 2.1、先序遍历 2.2、中序遍历 2.3、后序遍历 1、前言 学习二叉树的三种非递归遍历前&#xff0c;首先来了解一下递归序&#xff1a; 递归序就是按照先序遍历的顺序&#xff0c;遇到的所有结点按顺序排列&#xff0c;重复的结点也必须记…