Web API学习笔记(七)

聊天窗口案例
思路分析:
①点击图片实现用户切换功能
1-1:默认两个用户,通过点击来回切换
②点击发送按钮,把用户的聊天内容展示聊天区域
2-1:点击发送按钮,把聊天内容展示在聊天区域
2-2:设定聊天在连天区域内不同位置显示

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>微信聊天窗口</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			font-family: '微软雅黑'
		}

		#container {
			width: 450px;
			height: 600px;
			background: #eee;
			margin: 10px auto 0;
			position: relative;
			box-shadow: 0px 0px 16px #999;
		}

		.header {
			background: #000;
			height: 34px;
			color: #fff;
			height: 40px;
			line-height: 40px;
			font-size: 20px;
			padding: 0 10px;
		}

		.footer {
			width: 430px;
			height: 40px;
			background: #999;
			position: absolute;
			bottom: 0;
			padding: 10px;
		}

		.footer input {
			width: 300px;
			height: 38px;
			outline: none;
			font-size: 16px;
			text-indent: 10px;
			position: absolute;
			border-radius: 6px;
			right: 80px;
		}

		.footer span {
			display: inline-block;
			width: 62px;
			height: 38px;
			background: #ccc;
			font-weight: 900;
			line-height: 38px;
			cursor: pointer;
			text-align: center;
			position: absolute;
			right: 10px;
			top: 14px;
			border-radius: 6px;
		}

		.footer span:hover {
			color: #777;
			background: #ddd;
		}

		.icon {
			display: inline-block;
			background: red;
			width: 50px;
			height: 50px;
			border-radius: 30px;
			position: absolute;
			bottom: 3px;
			left: 10px;
			cursor: pointer;
			overflow: hidden;
		}

		img {
			width: 60px;
			height: 60px;
			border-radius: 8px;
		}

		.content {
			font-size: 20px;
			width: 435px;
			height: 662px;
			overflow: auto;
			padding: 5px;
		}

		.content li {
			margin-top: 10px;
			padding-left: 10px;
			width: 412px;
			display: block;
			clear: both;
			overflow: hidden;
		}

		.content li img {
			float: left;
		}

		.content li span {
			background: #7cfc00;
			padding: 10px;
			border-radius: 10px;
			float: left;
			margin: 6px 10px 0 10px;
			max-width: 310px;
			border: 1px solid #ccc;
			box-shadow: 0 0 3px #ccc;
		}

		.content li img.imgleft {
			float: left;
		}

		.content li img.imgright {
			float: right;
		}

		.content li span.spanleft {
			float: left;
			background: #fff;
		}

		.content li span.spanright {
			float: right;
			background: #7cfc00;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="header"> <span style="float: right;">20:30</span> <span style="float: left;">小泽老师</span> </div>

		<ul class="content"></ul>

		<div class="footer">
			<div class="icon"> <img src="img/1.png" alt="" id="icon"> </div>
			<input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span> </div>
	</div>
</body>
<script type="text/javascript">
	// 思路分析:
	// ①点击图片实现用户切换功能
	// 	1-1:默认两个用户,通过点击来回切换
	// ②点击发送按钮,把用户的聊天内容展示连天区域
	// 	2-1:点击发送按钮,把聊天内容展示在聊天区域
	// 	2-2:设定聊天在连天区域内不同位置显示

		// 获取图片标签
		var img = document.getElementById("icon");
		var arr = ["img/1.png","img/2.png"];
		var tag = 0;
		// 给图片对象绑定点击事件
		img.onclick = function(){
			// 根据当前显示的图片切换用户图片。
			if(tag == 0){
				img.src = arr[1];
				tag = 1;
				console.log(img.src);
			}else{
				img.src = arr[0];
				tag = 0;
			}
		}

		var btn = document.getElementById("btn");
		var num = -1; //统计聊天记录
		btn.onclick = function(){
			// 判断用户内容是否为空
			var text = document.getElementById("text").value;
			if(text == ""){
				alert("聊天内容不能为空");
			}else{
				// 把用户内容添加到区域区域
				var content = document.getElementsByTagName("ul")[0];
				content.innerHTML += "<li><img src='"+arr[tag]+"'/><span>"+text+"</span></li>"
			}

			var imgs = content.getElementsByTagName("img");
			var span = content.getElementsByTagName("span");
			num++;
			console.log(imgs[num]);
			console.log(span[num]);
			console.log(num);
			// 判断当前聊天的用户
			if(tag == 0){
				imgs[num].className = "imgleft";
				span[num].className = "spanleft";
			}else{
				imgs[num].className = "imgright";
				span[num].className = "spanright";
			}
			//清空聊天内容
			document.getElementById("text").value= "";
		}
 	
</script>

</html>

瀑布流案例
思路分析
1 获取到.itemBox 宽度
2 获取到.item 宽度
3 求出列数
4 求出间距
5 实现瀑布流布局的方法
6 滚动页面时 加载数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .itemBox {
            width: 1050px;
            margin: 0 auto;
            position: relative;
        }

        .item {
            border: 1px solid #ccc;
            padding: 4px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="itemBox">
        <div class="item">
            <img src="./images/P_000.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_001.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_002.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_003.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_004.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_005.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_006.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_007.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_008.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_009.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_000.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_001.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_002.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_003.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_004.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_005.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_006.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_007.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_008.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_009.jpg" alt="">
        </div>
    </div>
</body>
<script>

    window.onload = function () {
        /* 
        思路分析
        1 获取到.itemBox 宽度
        2 获取到.item 宽度
        3 求出列数
        4 求出间距
        5 实现瀑布流布局的方法
        6 滚动页面时 加载数据
     */
        // 获取到相关元素
        var itemBox = document.getElementsByClassName('itemBox')[0];
        var items = document.getElementsByClassName('item');
        // 1 获取到.itemBox 宽度
        var itemBoxW = itemBox.offsetWidth;
        // 2 获取到.item 宽度 
        var itemW = items[0].offsetWidth;
        // 3 求出列数
        var column = parseInt(itemBoxW / itemW);
        // 4 求出间距
        var distence = (itemBoxW - itemW * column) / (column - 1);
        console.log(distence);
        // 5 实现瀑布流布局的方法
        // 定义一个存储每列高度的容器
        var arr = [];
        waterFull();
        // 6 滚动页面时 加载数据
        window.onscroll = function () {
            if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
                var json = [
                    { "src": "./images/P_000.jpg" },
                    { "src": "./images/P_001.jpg" },
                    { "src": "./images/P_002.jpg" },
                    { "src": "./images/P_003.jpg" },
                    { "src": "./images/P_004.jpg" },
                    { "src": "./images/P_005.jpg" },
                    { "src": "./images/P_006.jpg" },
                    { "src": "./images/P_007.jpg" },
                    { "src": "./images/P_008.jpg" },
                    { "src": "./images/P_009.jpg" },
                    { "src": "./images/P_010.jpg" }
                ];
                for (var i = 0; i < json.length; i++) {
                    var div = document.createElement('div');
                    div.className = 'item';
                    var img = document.createElement('img');;
                    img.src = json[i].src;
                    div.appendChild(img);
                    itemBox.appendChild(div);
                }
                waterFull();


            }
        }
        // 实现瀑布流布局的方法
        function waterFull() {
            for (var i = 0; i < items.length; i++) {
                if (i < column) {
                    items[i].style.left = (itemW + distence) * i + 'px';
                    arr[i] = items[i].offsetHeight; 
                    // console.log(arr);
                } else {
                    var minV = getMin(arr).minV;
                    var minI = getMin(arr).minI;
                    items[i].style.left = (itemW + distence) * minI + 'px';
                    items[i].style.top = minV + distence + 'px';
                    arr[minI] = minV + distence + items[i].offsetHeight;

                }

            }
        }

        // 获取数组的最小值以及索引
        function getMin(arr) {
            var obj = {};
            obj.minV = arr[0];
            obj.minI = 0;
            for (var i = 1; i < arr.length; i++) {
                if (obj.minV > arr[i]) {
                    obj.minV = arr[i];
                    obj.minI = i;
                }
            }
            return obj;
        }

    }
</script>

</html>

像素鸟案例
思路分析
让小鸟飞起来
移动的背景
top
定时器
动画原理 leader = leader + step

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #game {
            width: 800px;
            height: 600px;
            background: url('./images/sky.png');
            position: relative;
            overflow: hidden;
        }

        #bird {
            width: 34px;
            height: 25px;
            background: url('./images/birds.png') -8px -10px no-repeat;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>

<body>
    <div id="game">
        <div id="bird"></div>
    </div>
    <script>
        // 让小鸟飞起来
        // 移动的背景
        // top
        // 定时器
        // 动画原理 leader = leader + step
        // 获取相应的元素
        var game = document.getElementById('game');
        var birdEle = document.getElementById('bird');
        // 初始化背景图的值

        var sky = {
            x: 0
        }
        // 初始bird 的值
        var bird = {
            speedX: 5,
            speedY: 0,
            x: birdEle.offsetLeft,
            y: birdEle.offsetTop
        }
        // 游戏的状态
        var running = true;
        setInterval(function () {
            if (running) {
                // 移动背景让小鸟实现水平运动
                sky.x -= 5;
                game.style.backgroundPositionX = sky.x + 'px';
                // 实现小鸟的上下运动
                bird.speedY += 1;
                bird.y += bird.speedY;
                if (bird.y < 0) {
                    running = false;
                    bird.y = 0;
                }
                if (bird.y + birdEle.offsetHeight > 600) {
                    running = false;
                    bird.y = 600 - birdEle.offsetHeight;
                    console.log(bird.y)
                }

                birdEle.style.top = bird.y + 'px';
            }

        }, 30)
        // 点击文档的时候实现小鸟向上运动
        document.onclick = function () {
            bird.speedY = -10;
        }
        // 创建管道
        function createPipe(position) {
            var pipe = {};
            pipe.x = position;
            pipe.uHeight = 200 + parseInt(Math.random() * 100);
            pipe.dHeight = 600 - pipe.uHeight - 200;
            pipe.dTop = pipe.uHeight + 200;
            var uPipe = document.createElement('div');
            uPipe.style.width = '52px';
            uPipe.style.height = pipe.uHeight + 'px';
            uPipe.style.background = 'url("./images/pipe2.png") no-repeat center bottom';
            uPipe.style.position = 'absolute';
            uPipe.style.top = '0px';
            uPipe.style.left = pipe.x + 'px';
            game.appendChild(uPipe);

            var dPipe = document.createElement('div');
            dPipe.style.width = '52px';
            dPipe.style.height = pipe.dHeight + 'px';
            dPipe.style.background = 'url("./images/pipe1.png") no-repeat center  top';
            dPipe.style.position = 'absolute';
            dPipe.style.top = pipe.dTop + 'px';
            dPipe.style.left = pipe.x + 'px';
            game.appendChild(dPipe);
            // 让管道运动起来
            setInterval(function () {
                if (running) {
                    pipe.x -= 2;
                    uPipe.style.left = pipe.x + 'px';
                    dPipe.style.left = pipe.x + 'px';
                    if (pipe.x < -52) {
                        pipe.x = 800;
                    }
                    var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.uHeight;
                    var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.uHeight + 200;
                    if (uCheck || dCheck) {
                        running = false;
                    }
                }
            }, 30)
        }
        createPipe(400);
        createPipe(600);
        createPipe(800);
        createPipe(1000);

    </script>
</body>

</html>

飞机大战案例.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #view {
            width: 320px;
            height: 568px;
            background: url('./img/bg.png');
            margin: 0 auto;
        }

        #fly_me {
            width: 34px;
            height: 24px;
            position: absolute;
        }
    </style>

</head>

<body>
    <div id="view"></div>
</body>
<script>
    // 创建战机
    var flyEle = document.createElement('div');
    flyEle.id = 'fly_me';
    flyEle.innerHTML = '<img src = "./img/me.png" />';
    document.body.appendChild(flyEle);

    // 战机跟随鼠标
    document.onmousemove = function (e) {
        var flyEle = document.getElementById('fly_me');
        var view = document.getElementById('view');
        var flyX = e.clientX - 17;
        var flyY = e.clientY - 12;
        var xCheck = flyX > view.offsetLeft && flyX < view.offsetLeft + view.offsetWidth - 34;
        var yCheck = flyY > view.offsetTop && flyY < view.offsetTop + view.offsetHeight - 24;
        if (xCheck && yCheck) {
            flyEle.style.top = flyY + 'px';
            flyEle.style.left = flyX + 'px';
            flyEle.flag = true;
        }
    }

    // 创建子弹 
    var objB = { //子弹的相关值
        name: 'bullet',
        num: 1,
        arr: [],// ['id|top|left']
        width: 6,
        height: 14,
        path: './img/b.png'
    };
    createBullet(objB);
    function createBullet(obj) {
        setInterval(function () {
            var flyEle = document.getElementById('fly_me');
            if (flyEle.flag) {
                var ele = document.createElement('div');
                ele.id = obj.name + obj.num;
                var length = obj.arr.length;
                if (length < 50) {
                    obj.arr[length] = ele.id + '|';
                    obj.num++;
                    ele.style.width = obj.width + "px";
                    ele.style.height = obj.height + "px";
                    ele.style.position = 'absolute';
                    ele.style.background = 'url(' + obj.path + ')';

                    ele.style.top = parseInt(flyEle.style.top) + 6 + 'px';
                    obj.arr[length] = obj.arr[length] + ele.style.top + '|';
                    ele.style.left = parseInt(flyEle.style.left) + 14 + 'px';
                    obj.arr[length] = obj.arr[length] + ele.style.left;
                }
                document.body.appendChild(ele);
            }
        }, 1000)
    }
    // 让子弹运动其起来
    function moveBullet() {
        var flyEle = document.getElementById('fly_me');
        if (flyEle.flag) {
            for (var i = 0; i < objB.arr.length; i++) {
                var newArr = objB.arr[i].split('|');
                var eleB = document.getElementById(newArr[0]);
                newArr[1] = parseInt(newArr[1]) - 1;
                eleB.style.top = newArr[1] + 'px';
                objB.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
                if (newArr[1] < 0) {
                    objB.arr.splice(i, 1);
                    var delEle = document.getElementById(newArr[0]);
                    delEle.parentNode.removeChild(delEle);
                }
            }

        }
    }

    // 创建敌机
    var objF = {
        name: 'foe',
        num: 1,
        arr: [],// ['id|top|left']
        width: 34,
        height: 24,
        path: './img/foe.png'
    };
    createFoe(objF);
    function createFoe(obj) {
        setInterval(function () {
            var flyEle = document.getElementById('fly_me');
            if (flyEle.flag) {
                var ele = document.createElement('div');
                ele.id = obj.name + obj.num;
                var length = obj.arr.length;
                if (length < 50) {
                    obj.arr[length] = ele.id + '|';
                    obj.num++;
                    ele.style.width = obj.width + "px";
                    ele.style.height = obj.height + "px";
                    ele.style.position = 'absolute';
                    ele.style.background = 'url(' + obj.path + ')';

                    ele.style.top = 0;
                    obj.arr[length] = obj.arr[length] + ele.style.top + '|';
                    var ran = Math.random() * 286;
                    ele.style.left = view.offsetLeft + ran + 'px';
                    obj.arr[length] = obj.arr[length] + ele.style.left;
                }
                document.body.appendChild(ele);
            }
        }, 1000)
    }
    // 让敌机运动其起来
    function moveFoe() {
        var flyEle = document.getElementById('fly_me');
        if (flyEle.flag) {
            for (var i = 0; i < objF.arr.length; i++) {
                var newArr = objF.arr[i].split('|');
                var eleB = document.getElementById(newArr[0]);
                newArr[1] = parseInt(newArr[1]) + 1;
                eleB.style.top = newArr[1] + 'px';
                objF.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
                if (newArr[1] > view.offsetHeight - 24) {
                    objF.arr.splice(i, 1);
                    var delEle = document.getElementById(newArr[0]);
                    delEle.parentNode.removeChild(delEle);
                }
            }

        }
    }


    setInterval(function () {
        // 让子弹运动其起来
        moveBullet()
        // 让敌机运动起来
        moveFoe();
        for (var i = 0; i < objF.arr.length; i++) {
            var newArr = objF.arr[i].split('|');
            var eleF = document.getElementById(newArr[0]);
            var xFS = parseInt(newArr[2]);
            var xFE = parseInt(newArr[2]) + 34;
            var yFS = parseInt(newArr[1]);
            var yFE = parseInt(newArr[1]) + 24;
            for (var j = 0; j < objB.arr.length; j++) {
                var newArr1 = objB.arr[j].split('|');
                var eleB = document.getElementById(newArr1[0]);
                var xB = parseInt(newArr1[2]);
                var yB = parseInt(newArr1[1]);
                var xCheck = xB > xFS && xB < xFE;
                var yCheck = yB > yFS && yB < yFE;

                if (xCheck && yCheck) {
                    objF.arr.splice(i, 1);
                    eleF.parentNode.removeChild(eleF);
                    objB.arr.splice(j, 1);
                    eleB.parentNode.removeChild(eleB);
                }
            }
        }

    }, 10)
</script>
</html>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页