前端常用代码整理（不断更新中）— js，jquery篇-编程知识

前端常用代码整理（不断更新中）— 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：冰海恋雨