日度归档:2020年6月19日

javascript 如何使用js代码间隔一秒打印1,2,3,4,5呢?


摘要:
下文讲述js的间隔1秒输出1,2,3,4,5的方法分享,如下所示:

//1.自执行函数

    for (var i=0; i<5; i++) {
      (function (i) {
        setTimeout(() => console.log(i), 1000*i)
      })(i)
    }

//2. es6块级作用域let

 for (let i=0; i<5; i++) {
      (function () {
        setTimeout(() => console.log(i), 1000*i)
      })()
    }


 var out = (i) => {
      setTimeout (() => console.log(i), 1000*i)
    }
    for (var i=0; i<5; i++) {
      out(i)
    }
 


// Promise.all()方法

    var arr = []
    var output = (i) => new Promise(res => {
      setTimeout(()=>{
        console.log(i)
        res()
      }, 1000*i)
    })
    for (var i=0; i<5; i++) {
      arr.push(output(i))
    }
    Promise.all(arr).then(()=> console.log(5))
 
// async await方法

    var sleep = () => new Promise (res => setTimeout(res, 1000))
    (async function () {
      for (let i=0; i<5; i++) {
        await sleep()
        console.log(i)
      }
    })()

css 如何实现一个心跳效果呢?


摘要:
下文讲述使用css代码实现一个心跳效果的方法分享,如下所示:

实现思路:
    使用animation动画实现大小变化,如下例所示:

如:

  <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>猫猫教程(maomao365.com)--实现心跳效果</title>
	<style type="text/css">
        .container {
            position: relative;
            margin: 100px;
        }
        .heart {
            position:relative;
            width: 100px;
            height: 100px;
            background: red;
            animation: hit .5s infinite alternate;
            transform: rotate(45deg);
        }
        .heart:before {
            position: absolute;
            left: -50px;
            content: '';
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            animation: hitLeft .5s infinite alternate;
        }
        .heart:after {
            position: absolute;
            top: -50px;
            content: '';
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            animation: hitTop .5s infinite alternate;
        }
        @keyframes hit
        {
            from { width: 100px; height: 100px; }
            to { width:150px; height: 150px; }
        }
        @keyframes hitTop {
            from { width: 100px; height: 100px; top: -50px; }
            to { width: 150px; height: 150px; top: -75px; }
        }
        @keyframes hitLeft {
            from { width: 100px; height: 100px; left: -50px; }
            to { width: 150px; height: 150px; left: -75px; }
        }
	</style>
</head>
<body>
<p>
 maomao365.com <br />
 css实现一个心跳效果
</p>
<hr />
    <div class="container">
        <div class="heart"></div>
    </div>
</body>
</html>
css 实现一个心跳效果

css 实现一个心跳效果

javascript 如何使用js脚本创建“全是0数组”呢?


摘要:
下文讲述使用js代码创建“全0数组”的方法分享,如下所示:

如:

//1.使用for循环生成
 
var arrObject = [];
for(var i=0;i<10;i++){
  arrObject[i] = 0;    
}


//2.使用fill()方法
var arrObject = new Array(10).fill(0);
 

//3.使用Uint8Array()方法
//生成8位无符号整数值的类型化数组,内容将初始化为0。
var arrObject = new Uint8Array(10);
 

//4.Array与String中的反复横跳
//生成全0的数组
var arrObject = new Array(10+1).join('0').split('');
  
//5.使用数组对象的map()方法,循环生成全0的数组

var arrObject = new Array(10);
arrObject.map(item=>{
    return 0;
});