js 运动框架mTween、日期对象、定时器

Go to comments

js 运动框架mTween、日期对象、定时器

一、mTween

mTween.js 是一个基于算法的运动框架，

该 js 文件里面有一个 mTween(porps) 方法，参数 props 是一个配置对象

props 对象的配置

1. el 需要运动动画的元素

2. duration 动画持续时间，单位是毫秒ms，默认400

3. cb 动画结束后的回调函数

4. attrs 动画的属性，配置也是一个对象

5. fx 运动方式

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mTween</title>
<script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2025/js/mTween.js"></script>
<style>
  div{
    width: 100px;
    height: 100px;
    background-color: chocolate;
    position: absolute;
  }
</style>
</head>
<body>

<button>开始动画</button>
<div></div>

<script>

var oDiv = document.getElementsByTagName('div');

document.getElementsByTagName('button')[0].onclick = function(){
  mTween({
    el: oDiv[0],
    duration: 1000, // 动画持续时间一秒
    attrs: {
      left: 300,
      top: 300
    },
    fx: 'backOut'
  })
}

</script>

</body>
</html>

attrs 属性

只能对数值类的属性进行动画，配置也是一个对象

可以设置进行动画的 css 属性

width

height

left

top

bottom

right

marginLeft

marginTop

marginBottom

marginRight

css3

rotate

rotateX

rotateY

skewX

skewY

translateX

translateY

translateZ

scale

scaleX

scaleY

fx 运动方式

1. 普通运动

linear 匀速

easeIn 加速，越来越快，该效果不是特别明显

easeOut 减速，逐渐变慢

easeBoth 先加速，后减速

2. 效果加强

easeInStrong 加速比上面明显

easeOutStrong

easeBothStrong

3. 弹性运动

elasticIn 弹动渐入，动画开始前有弹性效果

elasticOut 动画结束时候有弹性效果，用的比较多

elasticBoth 在动画开始时和结束时有弹性效果

4. 回弹

backIn 开始的时候有回弹效果

backOut 动画结束的时候，到目标点会回弹一下，该函数里面 s = 3.70158 是回弹距离

backBoth

5. 碰撞

bounceIn 弹球减振

bounceOut 弹球渐出

bounceBoth 结束的时候回弹

注意

1. 在使用 transform 相关属性的时候，需要先调用 css() 方法设置初始值

2. opacity 的取值范围 0 ~ 1

var oDiv = document.getElementsByTagName('div');

css(oDiv[0], 'rotate', 0); // css3的动画要先设置初始值

document.getElementsByTagName('button')[0].onclick = function(){
  mTween({
    el: oDiv[0],
    duration: 1000,
    attrs: {
      left: 300,
      top: 300,
      rotate: 600, // css3旋转
      opacity: .5 // 取值范围0~1
    },
    fx: 'backOut'
  })
}

cb 属性

动画结束后的回调函数

var oDiv = document.getElementsByTagName('div');

css(oDiv[0], 'rotate', 0);

document.getElementsByTagName('button')[0].onclick = function(){
  mTween({
    el: oDiv[0],
    duration: 1000,
    attrs: {
      left: 300,
      top: 300,
      rotate: 600,
      opacity: .5
    },
    fx: 'backOut',
    cb: function(){ // 回调函数里在调用mTween运动方法
      mTween({
        el: oDiv[0],
        duration: 0, 
        attrs: {
          left: 10,
          top: 35,
          rotate: 0,
          opacity: 1
        }
     })
    }
  })
}

二、日期对象

获取用户本地时间

var date = new Date();

var year = date.getFullYear();//获取年份
var month = date.getMonth();//获取月份 0-11
var day =  date.getDate(); //获取日期
var week = date.getDay(); // 获取星期几 0-6，0代表星期天
var hours = date.getHours(); //获取小时 0-23
var minutes = date.getMinutes();//获取分钟 0-59
var seconds = date.getSeconds();// 获取秒钟 0-59
var milliSeconds = date.getMilliseconds(); // 获取毫秒 0-999

// 注意月份month要加1
console.log(year+'年', month+1+'月', day+'日', '周'+week, hours+'时', minutes+'分', seconds+'秒', milliSeconds);

数码时钟

0000年00月00日00:00:00 星期一

<p></p>	

<script>

var p = document.querySelector('p');

var weekTxt = ["天","一","二","三","四","五","六"];

toDate();

setInterval(toDate,1000);

function toDate(){
  var date = new Date();
  var year = date.getFullYear();
  var month = toDB(date.getMonth() + 1); // 月份要加1
  var day = toDB(date.getDate());
  var hours = toDB(date.getHours());
  var minutes = toDB(date.getMinutes());
  var seconds = toDB(date.getSeconds());
  var week = weekTxt[date.getDay()];
  p.innerHTML = year+'年'+month+'月'+day+'日'+hours+':'+minutes+':'+seconds+' 星期'+week;
}

function toDB(nub){
  if(nub < 10){
    return "0" + nub;
  }
  return "" + nub;
}

</script>

getTime() 获取时间戳

距离国际时间 0 时区 1970.1.1 0:0:0 的毫秒数，北京时间要加 8 小时 1970.1.1 08:00:00

var time = new Date().getTime();// 时间戳

console.log(time);

日期设置

new Date('2017 7 6 20:00:00')

new Date('June 10,201712:12:12')

new Date(时间戳)

var date = new Date(2017 7 6 20:00:00);
console.log(date); // Thu Jul 06 2017 20:00:00 GMT+0800 (中国标准时间)

var date = new Date(0);// 0是时间戳
console.log(date); // Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)

先获取 "2025年8月12日 17:44" 的时间戳，然后在格式化时间戳输出

var time = new Date('2025 8 12 17:44:00').getTime(); // 生成时间戳

var weekTxt = ["天","一","二","三","四","五","六"];

function toDB(nub){
  if(nub < 10){
    return "0" + nub;
  }
  return "" + nub;
}

// 获取时间
var date = new Date(time);
var year = date.getFullYear();
var month = toDB(date.getMonth() + 1); // 月份要加1
var day = toDB(date.getDate());
var hours = toDB(date.getHours());
var minutes = toDB(date.getMinutes());
var seconds = toDB(date.getSeconds());
var week = weekTxt[date.getDay()];

console.log(year+'年'+month+'月'+day+'日'+hours+':'+minutes+':'+seconds+' 星期'+week); // 2025年08月12日17:44:00 星期二

设置时间

方法	说明
setFullYear(yearValue [, monthValue [, dayValue]])	设置年份
setMonth(monthValue [, dayValue])	设置月份
setDate(dayValue)	设置天，如果为 dayValue 指定0，那么日期就会被设置为上个月的最后一天
setHours(hoursValue [, minutesValue [, secondsValue [, msValue]])	设置小时
setMinutes(minutesValue [, secondsValue [, msValue]])	设置分钟
setSeconds(secondsValue [, msValue])	设置秒
setMilliseconds(millisecondsValue)	设置毫秒
setTime(timeValue)	设置时间戳

示例

date.setFullYear(2100,0,1)

date.setMonth(3,1)

var date = new Date();

date.setFullYear(2025);
date.setMonth(8-1); // 设置8月要减1
date.setDate(12);

console.log(date); // Tue Aug 12 2025 18:30:55 GMT+0800 (中国标准时间)

计算本月份还有多少天

var date = new Date();
var nowMonth = date.getMonth();//获取当前几月份，比如当前8月，但显示的是7

var nextDate = new Date();
nextDate.setMonth(nowMonth+1, 0);// 设置日期为本月份的最后一天

console.log(nextDate.getDate() - date.getDate());

获取每个月的一号是周几

var date = new Date();

var nowMonth = date.getMonth(); // 获取当前月份

date.setMonth(nowMonth, 1); // 设置时间为当前月1日

console.log(date.getDay()); // 获取当月1日的星期

三、定时器

定时器管理

<button>Run</button>
<button>Stop</button>
<div id="box" style="position:absolute;left:0;top:50px;width:100px;height:100px;background:chocolate;"></div>

<script>

function getStyle(el, attr){
  return parseFloat(getComputedStyle(el)[attr]);
}

var btn = document.querySelectorAll('button');
var box = document.querySelector('#box');
var timer = 0;

// 在定时器开启之前，先关闭，确保定时器只有一个在执行
btn[0].onclick = function(){
  clearInterval(timer);
  timer = setInterval(function(){
    var l = getStyle(box, "left") + 2;
    box.style.left = l + "px";
  },30);
};

btn[1].onclick = function(){
  clearInterval(timer);
};

</script>

广告展开

1. 页面加载完 2s后，

2. banner 高度，动画打开

3. 展示 3s

4. banner 高度，动画收缩

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {margin:0;}
#banner{margin:0 auto;width:1000px;height:0px;overflow:hidden;background:chocolate;}
#box {margin:0 auto;width:1000px;height:500px;background:#eee;}
</style>
</head>
<body>

<div id="banner">这里是广告</div>
<div id="box"></div>

<script>

var banner = document.querySelector('#banner');
var h = 0;
setTimeout(function(){
  var timer = setInterval(function(){
    if(h == 90){
      clearInterval(timer);
      console.log("高度展开了");
      setTimeout(function(){
        console.log("准备关闭");
        var timer2 = setInterval(function(){
          if(h < 0){
            clearInterval(timer2);
            console.log("已经关闭");
          } else {
            h--;
            banner.style.height = h + "px"; 
          }
        },20);
      },3000);
    } else {
      h++;
      banner.style.height = h + "px"; 
    }
  },20);
},2000);

</script> 

</body>
</html>