first commit

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/js/game.js

@@ -0,0 +1,199 @@
+var body = document.querySelector("body");
+var people = document.querySelector(".people");
+var bombAudio = document.querySelector(".bombAudio");
+var appleAudio = document.querySelector(".appleAudio");
+// 屏幕的宽度
+var screenWidth = document.body.clientWidth;
+var screenHeight = document.body.clientHeight;
+var fraction = 80;
+var gameProbability = 0.4;
+var bmobSpeed = 80;
+var appleOffset = 20;
+var nmb;
+//随机时间改变炸弹大小
+
+
+//开局设置难易程度
+var ua =document.querySelector(".aaa");
+var ulist = document.querySelectorAll(".aaa li");
+ulist.forEach(function(a,b){
+       a.onclick = function(){
+          if(a.value == 1){
+            gameProbability = 0.8;
+            bmobSpeed = 100;
+            appleOffset = 40;
+          }else if(a.value == 2){
+            gameProbability = 0.4;
+            bmobSpeed = 70;
+            appleOffset = 30;
+          }else if(a.value == 3){
+            gameProbability = 0.2;
+            bmobSpeed = 60;
+            appleOffset = 20;
+          }
+          else if(a.value == 4){
+            gameProbability = 0.1;
+            bmobSpeed = 40;
+            appleOffset = 10;
+            setInterval(function(){
+              nmb = parseInt(Math.random()*300);
+              console.log(nmb);
+            },80);
+            setInterval(function(){
+              var boomm = document.querySelector(".boom");
+              boomm.style.width="100px";
+            },nmb)
+          }
+          ua.style ="opacity: 0;display:none;"
+          console.log(gameProbability,bmobSpeed,appleOffset);
+          setInterval(function(){
+            init();
+          },400)
+          
+       }
+      
+    }) 
+    console.log(gameProbability,bmobSpeed,appleOffset);
+function createdEle(type) {
+
+  var Img = document.createElement("img");
+  Img.src = type == 1 ? '../img/apple.png' : '../img/boom.png';
+  Img.className = type == 1 ? 'apple' : 'boom';
+   // 56  84
+  // 元素的宽度
+  var SpanWidth = type == 1 ? 40 : 60;
+  var SpanLeft = Math.random() * (screenWidth - SpanWidth)
+  if (SpanLeft <= SpanWidth) {
+    SpanLeft = 0
+  }
+
+  Img.style = `
+    position: absolute;
+    left: ${SpanLeft}px;
+    top: ${type == 1 ? -56 : -84}px;
+  `;
+
+  body.appendChild(Img);
+  animation(type, Img)
+}
+
+function animation(type, span) {
+  // 苹果🍎
+  if (type == 1) {
+    var appleInterval = setInterval(function (){
+      span.style.top = `${parseInt(span.style.top) + appleOffset}px`;
+      // 判断苹果是否超过苹果最大高度，如果超过，删除苹果并清除定时器
+      if (parseInt(span.style.top) > screenHeight) {
+        body.removeChild(span)
+        clearInterval(appleInterval)
+      } else {
+        JudgingCollision(span, appleInterval)
+      }
+    },60)
+  // 炸弹💣
+  } else {
+    var boomInterval = setInterval(function (){
+      span.style.top = `${parseInt(span.style.top) + 20}px`;
+      //判断炸弹是否超过苹果最大高度，如果超过，删除炸弹并清除定时器
+      if (parseInt(span.style.top) > screenHeight) {
+        body.removeChild(span)
+        clearInterval(boomInterval)
+      } else {
+        JudgingCollision(span, boomInterval)
+      }
+    },bmobSpeed)
+  }
+}
+
+/**
+ * 判断是否碰撞
+ * @constructor
+ */
+function JudgingCollision(span, timeout) {
+  var people = document.querySelector(".people");
+  var peopleX1 = parseInt(people.style.left);
+  var peopleX2 = parseInt(people.style.left) + people.clientWidth;
+  var peopleX3 = people.offsetTop;
+  var peopleX4 = people.offsetTop + people.clientHeight;
+  var spanX1 = parseInt(span.style.left);
+  var spanX2 = parseInt(span.style.left) + span.clientWidth;
+  var spanX3 = parseInt(span.style.top);
+  var spanX4 = parseInt(span.style.top) +  span.clientHeight;
+
+  // 碰撞检测
+  if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
+    // 没碰上
+  }else{
+    if (span.className == "apple") {
+      fraction += 10;
+
+      // 如果分数超过100分，
+      if (fraction >= 300) {
+        // 降低苹果出现的概率，也就是提高炸弹数量
+        gameProbability = 0.2;
+        // 并且加快炸弹的速度
+        bmobSpeed = 80;
+        appleOffset = 40;
+      }
+
+      document.querySelector(".fraction").innerText = `${fraction}分`;
+      appleAudio.play()
+      body.removeChild(span)
+      clearInterval(timeout)
+    } else {
+      fraction -= 20;
+      document.querySelector(".fraction").innerText = `${fraction}分`;
+      bombAudio.play();
+
+      if (fraction <= 0) {
+        clearInterval(timeout)
+        confirm("游戏失败")
+        location.reload()
+      } else {
+        span.src = "../img/bombimg.png"
+        clearInterval(timeout)
+        setTimeout(function (){
+          body.removeChild(span)
+        },100)
+      }
+    }
+  }
+}
+
+function init () {
+  var probability = Number(Math.random().toFixed(1))
+  if (probability <= gameProbability) {
+    createdEle(1)
+  } else {
+    createdEle(2)
+  }
+}
+
+
+
+body.onmousemove = function (e) {
+  if (e.x <= 100) {
+    people.style.left = `0px`;
+  } else {
+    people.style.left = `${e.x - 100}px`;
+  }
+
+  // 判断人物向右移动
+  if (parseInt(people.style.left) > screenWidth / 2) {
+    people.className = 'people'
+  // 判断人物向左移动 添加类名 leftPeople，使用css3的水平镜像翻转人物
+  } else {
+    people.className = 'people leftPeople'
+  }
+}
+
+
+// 接到一个苹果加10分
+// 接到炸弹减20
+// 默认0分
+// 结束条件：分数 < 0
+
+
+// 任务
+// 分数 >100 的时候 炸弹速度加快（），炸弹的数量变多（概率）
+//

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/11.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>aaa</title>
+    <style>
+        html {
+            height: 100%;
+            width: 100%;
+        }
+
+        body {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        span {
+            transition: all 0.8s ease;
+            user-select: none;
+        }
+    </style>
+</head>
+
+<body>
+
+</body>
+<script>
+    var ibody = document.querySelector("body");
+    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
+    var i = 0
+
+    ibody.onmousemove = function (e) {
+        var ispan = document.createElement("span");
+        var x = e.x,
+            y = e.y;
+        ispan.innerText = arr[i];
+        ibody.appendChild(ispan);
+
+        ispan.style = `position: absolute;
+                top: ${y -15}px;
+                left: ${x - 5}px;
+                color: hsla(${parseInt(Math.random()*360)}, 100%, 50%, 1);
+            `;
+        setTimeout(function () {
+            ispan.style = `position: absolute;
+                top: ${y - 15 - 100}px;
+                left: ${x - 5}px;
+                color: hsla(${parseInt(Math.random()*360)}, 100%, 50%, 1);
+                opacity: 0;
+                `;
+        }, 200)
+        setTimeout(function () {
+            ibody.removeChild(ispan);
+        }, 1100)
+
+        i++;
+        i == 10 ? i = 0 : i;
+    }
+</script>
+
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/bg.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            position: relative;
+            
+        }
+        html{
+            height: 100%;
+            width: 100%;
+            
+        }
+        span{
+            transition: all 1s ease;
+        }
+    </style>
+</head>
+<body>
+    
+</body>
+<script>
+        var bo = document.querySelector("body");
+        var index = 0;
+        bo.onclick = function(e){
+            var x = e.x , y = e.y;
+            var cspan = document.createElement("span");
+            console.log(x,y);
+            var arr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
+            cspan.innerText = arr[index];
+            cspan.style=`
+                color:hsla(${parseInt(Math.random()*360)}, 100%, 50%, 1);
+                position: absolute;
+                top:${y - 22}px ;
+                left:${x - 31}px ;
+            `;
+            bo.appendChild(cspan);
+
+            setInterval(function(){
+                cspan.style=`
+                color:hsla(${parseInt(Math.random()*360)}, 100%, 50%, 1);
+                position: absolute;
+                top:${y - 22 - 100}px ;
+                left:${x - 31}px ;
+                opacity: 0;
+            `;
+            },100)
+
+            setInterval(function(){
+                bo.removeChild(cspan);
+            },1100)
+
+
+            index++;
+            index == 12?index=0:index=index;
+
+        }
+
+
+</script>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/game.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        html {
+            height: 100%;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        body {
+            background: #98d8fe url("./img/back.png");
+            background-position: center bottom;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .people {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100px;
+        }
+        span {
+
+        }
+        .leftPeople {
+            transform: rotateY(180deg) !important;
+        }
+        .apple {
+            width: 40px;
+            height: 40px;
+            transition: top 0.1s ease;
+        }
+        .boom {
+            width: 60px;
+            transition: top 0.1s ease;
+        }
+        .booms{
+            width: 100px;
+            transition: all 0.01s ease;
+        }
+        .fraction {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            font-size: 20px;
+        }
+        .aaa{
+            transition: all 1s ease;
+            display: block;
+            opacity: 1;
+        }
+        .aaa li{
+            width: 20%;
+            height: 50px;
+            background: rgba(65, 65, 65, 0.699);
+            color: white;
+            font-size: 20px;
+            list-style: none;
+            margin-top: 3px;
+            line-height: 50px;
+            text-align: center;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+
+    
+        <ul class="aaa">
+            <li value="1">简单</li>
+            <li value="2">一般</li>
+            <li value="3">困难</li>
+            <li value="4">谁玩谁zz</li>
+        </ul>
+    
+    
+    <!--得分-->
+   <div class="fraction">0分</div>
+    <!--爆炸音效-->
+   <audio class="bombAudio" src="../img/bomb.mp3" hidden></audio>
+   <audio class="appleAudio" src="../img/apple.mp3" hidden></audio>
+    <!--人物-->
+   <img class="people" src="../img/pepop.png"/>
+</body>
+<script src="../js/game.js"></script>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/input.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模拟百度搜索栏</title>
+</head>
+<body>
+    
+    <input type="text" placeholder="请输入关键字">
+    <ul>
+        
+    </ul>
+</body>
+    <script>
+        var Input = document.querySelector("input");
+        var tishi = document.querySelector("ul");
+        var ku = ["你好123","我好123","他好321","大家好321","她好111","它好222","heeloaaa","Hibbb"];
+        var New = [];
+        Input.oninput = function(){
+            New = []
+          if(Input.value.length != 0){
+                ku.forEach(function(v){
+                    if(v.search(Input.value) != -1){
+                    var seindex = v.search(Input.value);
+                    var swidth = Input.value.length;
+                    var str = `<span style="color:blue;">${Input.value}</span>`;
+                    New.push(v.replace(Input.value,str));
+                        
+                    }   
+                });
+            if(New.length > 0){
+                tishi.innerHTML = "";
+                New.forEach(function(val,i){
+                    tishi.innerHTML += `<li>${val}</li>`
+                });
+
+                var Lis = tishi.querySelectorAll("li");
+                    Lis.forEach(function(v){
+                     v.onclick = function(){
+                    Input.value = v.innerText;
+                    tishi.innerHTML = ""
+                }});
+            }else{               
+                tishi.innerHTML = "<li>搜索不到关键字</li>"; }  
+               
+          }else{
+              tishi.innerHTML =""
+          }
+          
+    }
+    
+    </script>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/tab.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>tab</title>
+    <style>
+        body,p,ul,li{
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        #title{
+            overflow: hidden;
+        }
+        #title li{
+            float: left;
+            margin-left: 15px;
+        }
+        #content li{
+            display: none;
+        }
+        .title_act{
+            color: orange;
+        }
+        .content_act{
+            display: block !important;
+        }
+    </style>
+</head>
+<body>
+    <ul id="title">
+        <li class="title_act">AA</li>
+        <li>BB</li>
+        <li>CC</li>
+        <li>DD</li>
+    </ul>
+    <ul id="content">
+        <li class="content_act">aaaa</li>
+        <li>bbbb</li>
+        <li>cccc</li>
+        <li>dddd</li>
+    </ul>
+</body>
+<script>
+    var t_li = document.querySelectorAll("#title li")
+    var c_li = document.querySelectorAll("#content li")
+    
+   t_li.forEach(function(val,index){
+       val.onclick = function(){
+            t_li.forEach(function(v,i){
+                t_li[i].className=" ";
+                c_li[i].className=" ";
+            })
+
+            t_li[index].className="title_act";
+            c_li[index].className="content_act";
+
+       }
+
+   })
+</script>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/tsbs.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body,
+        p,
+        ul,
+        li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .titles {
+            overflow: hidden;
+        }
+
+        .titles li {
+            float: left;
+            margin-left: 15px;
+        }
+
+        .contents li {
+            display: none;
+        }
+
+        .title_active {
+            color: orange;
+        }
+
+        .content_active {
+            display: block !important;
+        }
+    </style>
+</head>
+
+<body>
+    <ul class="titles">
+            
+    </ul>
+    <ul class="contents">
+    
+    </ul>
+</body>
+<script>
+    var TabsList = [{
+            title: '全部',
+            content: [{
+                    text: '全部的内容1',
+                    id: 1
+                },
+                {
+                    text: '全部的内容2',
+                    id: 2
+                },
+                {
+                    text: '全部的内容3',
+                    id: 3
+                }
+            ]
+        },
+        {
+            title: '安全',
+            content: [{
+                    text: '安全的内容1',
+                    id: 4
+                },
+                {
+                    text: '安全的内容2',
+                    id: 5
+                }
+            ]
+        },
+        {
+            title: '论坛',
+            content: [{
+                    text: '论坛的内容1',
+                    id: 6
+                },
+                {
+                    text: '论坛的内容2',
+                    id: 7
+                }
+            ]
+        }
+    ];
+
+    var titles = document.querySelector(".titles");
+    var contents = document.querySelector(".contents");
+
+    function ReadTitle() {
+        TabsList.forEach(function (v, i) {
+            titles.innerHTML += `
+                <li class="${i == 0?"title_active" : ""}">${v.title}</li>
+                `;
+             
+        });
+        ReadContent();   
+       
+    }
+
+    function ReadContent() {
+        console.log(1111);
+        //var contentli = contents.querySelectorAll("li");
+        TabsList.forEach(function (v, i) {
+            contents.innerHTML += `
+                <li class="${i == 0?"content_active" : ""}">
+                   ${
+                       v.content.map(function(val,index){
+                            return `
+                                <div class="tiem"> <a href="./info/id=${val.id}">${val.text}</a></div>
+                            `;
+                       }).toString().replace(/,/ig, "")
+                   }
+                </li>
+                `;
+                
+        })
+        onclickli();
+    }
+    function onclickli(){
+        var list = document.querySelectorAll(".titles li");
+        var cist = document.querySelectorAll('.contents li');
+        list.forEach(function(v,i) {
+            v.onclick = function(){
+                list.forEach(function(c,d){
+                    list[d].className = "";
+                    cist[d].className = "";
+                })
+                list[i].className = "title_active";
+                cist[i].className = "content_active";
+                
+            }
+        })
+
+    }
+
+    ReadTitle()
+</script>
+
+</html>