JavaScript之内置函数 Date和Math
2018-03-16 本文已影响6人
追逐_chase
timg.jpg
日期函数Date()
声明日期函数
- Date还可以当作构造函数使用。对它使用new命令，会返回一个Date对象的实例。如果不加参数，实例代表的就是当前时间。
var date = new Date();
获取日期和时间
getDate() 获取日 1-31
getDay () 获取星期 0-6
getMonth () 获取月 0-11
getFullYear () 获取完整年份（浏览器都支持）
getHours () 获取小时 0-23
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getMilliseconds () 获取当前的毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
- 几个常用的方法
var date = new Date();
//转化成字符串
console.log(date.toString());
//日期格式
console.log(date.toDateString()); //英文式
console.log(date.toLocaleDateString()); //
// 打印结果
Mon Jun 11 2018 15:32:54 GMT+0800 (CST)
Mon Jun 11 2018
2018/6/11
//当前时间 没有年月日
console.log(date.toLocaleTimeString());
//当前时间 有年月日
console.log(date.toLocaleString());
定时器
- setInterval()函数
window.setInterval(“执行的函数”,间隔时间)
setInterval(“fun()”,1000) 可以用
setInterval( function(){} , 1000 )
- 格式化当前时间
//格式化时间
function getDateFormat (date) {
//获取年
var year = date.getFullYear();
//获取月
var month = date.getMonth() + 1;
//获取日
var day = date.getDate();
//获取小时
var hours = date.getHours();
//获取分钟
var minute = date.getMinutes();
//获取秒
var second = date.getSeconds();
//
month = (month < 10 ? "0" + month : month);
day = (day < 10 ? "0" + day : day);
hours = (hours < 10 ? "0" + hours : hours);
minute = (minute <10 ? "0" + minute : minute);
second = (second < 10 ? "0" + second : second);
return year + "年" + month + "月" + day+ "日" + " " + hours + ":" + minute +":" + second;
}
- clearInterval(定时器名) 清除定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>短信倒计时</title>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById("btn");
var timer = null;
var count = 10;
btn.onclick = function () {
clearInterval(timer);
this.disabled = true;
timer = setInterval(fn,1000);
function fn() {
count --;
if (count == 0){
btn.innerHTML = "重新发送";
clearInterval(timer);
btn.disabled = false;
count = 10;
return;
} else {
btn.innerHTML = "还剩余" + count + "秒";
}
}
}
}
</script>
</head>
<body>
<div class="box">
<input type="text"> <button id="btn" >点击发送短信</button>
</div>
</body>
</html>
- setTimeout("函数",时间) 延迟执行， 只执行一次 （函数递归一块使用）
setTimeout(fn,5000); 5秒钟之后，去执行 fn 函数， 只执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏广告</title>
<style>
img {
position:absolute;
top: 0;
}
#left {
left: 0;
overflow: hidden;
}
#right {
right: 0;
}
</style>
</head>
<body>
<img src="1.gif" alt="" id="left">
<img src="2.gif" alt="" id="right">
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function hide(id) {
$(id).style.display = "none";
}
function show(id) {
$(id).style.display = "block";
}
setTimeout(closeAd,5000);
function closeAd() {
hide("left");
hide("right");
}
</script>
</body>
</html>
- 延迟执行
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var count = 5;
setTimeout(goIndexPage,1000);
function goIndexPage() {
count --;
box.innerHTML = "<a href='http://www.ezcarry.com'> 将在"+count+"秒后跳转到首页</a>";
if (count <= 0) {
//页面跳转 BOM
window.location.href = "http://www.ezcarry.com";
}else {
setTimeout(goIndexPage,1000);
}
}
</script>
缓冲公式
- 100是一个变数，可以随意的设置
leader = leader + (target - leader)/100;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓慢动画</title>
<style>
div{
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn"> 开始</button>
<div id="div"></div>
</body>
</html>
<script>
var btn = document.getElementById("btn");
var div = document.getElementById("div");
var timer = null;
var leader = 0;
var target = 500;
btn.onclick = function () {
setInterval(function () {
//速度 缓慢的公式
leader = leader + (target - leader)/100;
div.style.left = leader + "px";
},10);
}
</script>
效果图.gif
Math函数
//数学函数
//1.取整函数 去大的 向上取整
var num = Math.ceil(1.02);
console.log(num);
//2.向下取整
var num1 = Math.floor(1.5);
console.log(num1);
//3.四舍五入
var num2 = Math.round(1.6);
console.log(num2);
想了解更多可以看Math函数文档。
- 仿Math函数求Max最大值
function MyMath() {
this.getMax = function () {
var max = arguments[0];
for (var i = 0; i < arguments.length; i ++){
if (max<arguments[i]){
max = arguments[i];
}
}
return max;
};
}
var mt = new MyMath();
var result = mt.getMax(10,20,33,45,66);
console.log(result);
- 随机16进制的颜色
function getColor () {
var str = "#";
//定义数组
var array = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
for (var i = 0; i < 6; i++) {
//0-15个数随机 包括15在内
var num =parseInt(Math.random() *16);
//根据下标 获取对象的 array的数据
str += array[num];
}
return str;
}
console.log(getColor());
