个人千峰前端10天学习

xiaoxiao2021-02-27 354

第一天20170504

常用学习网站推荐 1.W3School: http://www.w3school.com.cn/

2.菜鸟教程： http://www.runoob.com/

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body>       1.编辑器代码提示快捷键 <p>先写p再按Tab键</p>  <p>先按<再按p再按回车键</p> <hr />  <p>2.这是一个段落标记 </p> <hr /> 3.html按空格键生成中多个空格只会显示一个 <hr /> 4.图片标签<br />  <img src="img/2.jpg" alt="2.jpg" /> <br />  <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2307466906,2255218472&fm=117&gp=0.jpg" alt="" /> <hr /> 5.跳转链接 <a href="http://www.qq.com" target="_blank"><img src="img/2.jpg" alt="" /></a> <hr /> </body> </html>

第二天20170505

css

选择器的使用

例子1

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>样式</title> <style type="text/css"> /*选择器*/ /*1.标签选择器*/ p{ font-size: 30px; /*RGB:一般是6位16进制，每两位代表一种颜色*/ color: #fff; background-color: #000000; } img{ /*一般控制图片只会控制宽高其中一个，图片会自动按比例伸缩*/ width:300px; height: 200px;; } /*2.id选择器（注意：一般这个页面相同的id只能出现一个）*/ #p2{ color: #abc; background-color: green; } /*3.class选择器*/ .p3{ color: red; } </style> </head> <body>  <p>第一个段落</p> <p id="p2">第二个段落</p> <p class="p3">第三个段落</p> <p class="p3">第四个段落</p> <img src="img/2.jpg" /> </body> </html> 例子2 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*类box内部的所有p标签*/ .box p{ color: blue; } /*类p2和p3使用相同的样式*/ .p2,.p3{ color:green; } </style> </head> <body> <div class="box"> <p>内部第一个</p> <p>内部第二个</p> </div> <p>外部第一个</p> <p class="p2">外部第二个</p> <p class="p3">外部第三个</p> </body> </html>

九大位置定位

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>九大位置</title> <style type="text/css"> * { /*外边距*/ margin: 0; /*4个参数顺时钟*/ /*margin:10px 10px 10px 10px;*/ /*2个参数（对边）：第一个参数上下，第二个左右*/ /*auto 自动计算距离*/ /*margin: 0px auto ;*/ /*内边距*/ padding: 0; } div { width: 150px; height: 150px; background-color: cornflowerblue; } .div01 { position: absolute; top: 0px; left: 0px; } .div02 { position: absolute; top: 0px; /*外部元素50%*/ /*left：配合absolute定位一起用，距离父布局*/ left: 50%; /*translate：平移*/ /*-50%代表自身50%*/ transform:translateX(-50%); } .div03 { position: absolute; top: 0px; right: 0px; } .div04 { position: absolute; top: 50%; left: 0px; transform:translateY(-50%); } .div05 { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); /*简写*/ /*transform: translate(-50%,-50%);*/ } .div06 { position: absolute; top: 50%; right: 0px; transform:translateY(-50%); } .div07 { position: absolute; bottom: 0px; left: 0px; } .div08 { position: absolute; bottom: 0px; left: 50%; transform:translateX(-50%); } .div09 { position: absolute; bottom: 0px; right: 0px; } </style> </head> <body> <div class="div01"> </div> <div class="div02"> </div> <div class="div03"> </div> <div class="div04"> </div> <div class="div05"> </div> <div class="div06"> </div> <div class="div07"> </div> <div class="div07"> </div> <div class="div08"> </div> <div class="div09"> </div> </body> </html> 绝对定位

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } div{ width: 100px; height: 100px; background-color: blue; } /*一旦使用absolute：绝对定位，意味着每个div都有独立的层。之间会相互覆盖覆盖原则：下面的标签会覆盖上面的标签同时z-index属性开始生效，控制z轴：默认值为0; * */ .div01{ position: absolute; z-index: 1; background-color: blue; } .div02{ position: absolute; background-color: red; } /*关于absolute绝对定位的嵌套标签设置了绝对定位。那么它自己本身相对的父元素是它就近相同设置了绝对位置的标签。如果，一直向上找，都每找到设置了绝对定位的标签，那就相对于整个HTML页面。 * */ .father{ position: absolute; width: 400px; left: 40%; height: 400px; background-color: blueviolet; margin:100px auto; } .child01{ position: absolute; top:200px; background-color: #000; } .child02{ position: absolute; background-color: #f0f; } </style> </head> <body> <div class="div01"></div> <div class="div02"></div> <br /> <div class="father"> <div class="child01"> </div> <div class="child02"> </div> </div> </body> </html> 相对定位

例1

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } .div01{ /*相对定位，四个方向的属性都是相对自己位置偏移*/ position: relative; width:100px; height:100px; background-color: blue; top:50px; z-index: 1; } .div02{ position:relative; width: 100px; height: 100px; background-color: darkcyan; } /*1.相对定位一般配合绝对定位一起使用。父元素使用相对定位，子元素使用绝对定位*/ /*2.相对定位不会影响到标签的位置，或者不会影响整个页面布局*/ </style> </head> <body> <div class="div01"></div> <div class="div02"></div> </body> </html> 应用小例子核心代码

html代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>照片墙</title> <link rel="stylesheet" type="text/css" href="css/main.css"/> </head> <body> <div class="box"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /> <img src="img/9.jpg" /> </div> </body> </html>

css代码

body{ background-color: blueviolet; } .box{ width:960px; /*水平居中*/ margin: 50px auto; } img{ /*内边距*/ padding:10px; background-color: white; /*阴影参数： * 参数1:阴影水平偏移 * 参数2:阴影垂直偏移 * 参数3：模糊度 * 参数4：颜色 * */ box-shadow: 10px 10px 10px black; /*动画过度效果*/ transition: all 0.5s; /*让图片使用z-index属性，同时不改变图片位置*/ position: relative; } /*选择img中第一个img*/ /*()里面可以填固定的子类序号或者填奇偶的字符*/ img:nth-child(odd){ /*旋转*/ transform: rotate(-10deg); } img:nth-child(even){ transform: rotate(10deg); } /*鼠标滑动监听*/ img:hover{ /*缩放*/ transform: scale(1.2); z-index: 1; box-shadow: none; } 运行效果图：

固定定位

例1

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,html{ height: 300%; } .fix { /*固定定位*/ position: fixed; right: 0; bottom: 0; width: 400px; height: 400px; background-color: red; /*背景图片参数:1.图片路径，2.平铺方式，3，图片位置*/ background: url(img/1.jpg) no-repeat center; /*参数：1边框宽度，2.边框样式，3，边框颜色*/ border:10px solid goldenrod; } </style> </head> <body> <div class="fix"> </div> </body> </html> 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .div01 { position: fixed; bottom: 0px; right: 0px; line-height: 0px; z-index: 1; width: 280px; height: 210px; background-color: #efefef; } .div01 .div02 { position: absolute; right: 0px; top:11px; color: #333; background-color: red; } .div01 .div03 { position:absolute; right: 0px; bottom: 0px; } </style> </head> <body> <div class="div01"> <div class="div02"> <a href="http://blog.csdn.net/">关闭</a> </div> <div class="div03"> <a href="https://www.baidu.com/"><img src="http://img.ads.csdn.net/2017/201704241619521051.jpg"></a> </div> </div> </body> </html>

字体布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .p1 { width: 200px; height: 100px; background-color: blanchedalmond; position: absolute; margin: 10px auto; /*字体居中，要使用以下两个属性一起使用*/ /*文本对齐居中*/ text-align: center; /*行高要和标签本身的高度一致*/ line-height: 100px; } /*使用嵌套做到文本居于底部*/ div { position: relative; margin:300px auto; width: 200px; height: 100px; background-color: chartreuse; } div .p2 { position:absolute; bottom: 0; left: 50%; transform: translateX(-50%); } </style> </head> <body> <p class="p1">第一个段落</p><br /> <div> <p class="p2">这是第二段</p> </div> </body> </html>

相对定位

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%; } .header { width: 100%; height: 30%; background-color: goldenrod; } .content { /*相对定位，不会破坏标签所在的位置。方便内部标签使用绝对定位，定到具体位置*/ position: relative; width: 100%; height: 60%; background-color: royalblue; } .footer { width: 100%; height: 10%; background-color: greenyellow } .content .left { width: 30%; height: 30%; background-color: black; /*永远相对的是自己最原始的位置*/ position: relative; /*由于本身的左上角（原点）和content的重合。所以以下类似absolute的写法一样可以居中*/ top: 50%; transform: translateY(-50%); /*备注：一定不要使用relative定位置*/ } /*这种写法也可以做到居中。原理：本身的长度的30%,translateY(-50%)上移自己的一半，相当于往上移动15% top=50%-15%=35% * */ /*.content .left { width: 30%; height: 30%; background-color: black; position: relative; top: 35%; }*/ .content .right { width: 30%; height: 30%; background-color: red; position: relative; /*如果，要达到居中。那么左上角的位置相对父布局=50%-自身一半（15%）=35%。本身左上角的位置是30%。 top=35%-30%=5% * */ top: 5%; /*以下代码为靠右。左移100%，把自身移除界面了。然后使用translateX(-100%)，移回本身*/ left: 100%; transform: translateX(-100%); } /*下面这种写法：自身的长度为30%，往回移动自身的长度。相当于，只要左移=100%-30%=70%*/ /*.content .right { width: 30%; height: 30%; background-color: red; position: relative; top: 5%; left: 70%; }*/ </style> </head> <body> <div class="header"> </div> <div class="content"> <div class="left"> </div> <div class="right"> </div> </div> <div class="footer"> </div> </body> </html>

第三天20170506

盒模型

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /** * 盒模型有两种 * 1.content-box(默认的) * 真实宽度=width+padingLeft+padingRight+borderLeft+borderRight;(内边距边框分左右) * 2.border-box * 真实宽度=width;（内边距和边框，不会增加标签宽度） */ .box01{ width:200px; height:200px; padding:20px; box-sizing: border-box; /*border:30px solid black;*/ background-color: blue;; } .box02{ width: 200px; height:200px; background-color: darkblue;; } </style> </head> <body> <div class="box01"> </div> <div class="box02"> </div> </body> </html>

input标签

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>   <input type="text" id="" value="" placeholder="手机号/邮箱" /> <input type="password" name="" id="" value="" placeholder="6位密码" /> <input type="checkbox" name="" id="" value="" checked="checked"/> <hr />  <input type="radio" name="radio" id="" value="L" checked="checked"/>篮球 <input type="radio" name="radio" id="" value="Z" />足球 <input type="radio" name="radio" id="" value="P" />排球 <hr /> <input type="button" name="" id="" value="登录" /> <button>登录</button> <input type="color" name="" id="" value="" /> </body> </html> 简单动画

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width:200px; height:200px; margin: 200px auto; background-color: blue;; /*增加过度*/ /** * 参数1.所有动画都过度 * 参数2.动画持续时间 */ transition: all 2s; transition-delay: 0.5; } /*transform数值基本都是相对自己的*/ .box:hover{ /*平移*/ /*transform: translateX(200px);*/ /*缩放*/ /*transform:scale(2);*/ /*旋转*/ transform: rotate(180deg); /*改变旋转中心*/ /*距离左上角*/ transform-origin: -10% -50%; } .box2:hover{ transform: translateX(100px) translateY(100px) scaleY(2) rotate(360deg); } </style> </head> <body>  <div class="box2"></div> </body> </html> 实例小项目

准备工作

在网站 http://www.iconfont.cn/home/index 中下载图标并解压

图标的使用方法:参照运行后的demo.html页面

新建web项目

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/main.css"/> </head> <body> <div class="box">   <h1 class="login Title">登录</h1> <input type="text" id="userName" placeholder="邮箱" /> <input type="password" id="pasword" placeholder="密码" /> <p class="pRegister">还没有账号？点击此处立即 <a href="register.html">注册</a></p> <a href="search.html"><input class="submit" type="submit" value="提交" /></a> </div> </body> </html> register.html页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/main.css"/> </head> <body> <div class="box">  <h1 class="register Title">注册</h1> <input type="text" id="userName" placeholder="邮箱" /> <input type="password" id="pasword" placeholder="密码" /> <input type="password" id="pasword" placeholder="确认密码" /> <button class="submit">提交</button> </div> </body> </html> search.html页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <div class="box"> <h1 class="search Title">发现</h1> <div class="serchDiv"> <input type="search" id="search" placeholder="请输入昵称" /> <button>搜索</button> </div> <div class="footer"> <a href="http://WWW.baidu.com"> <span class="font"></span> <p>首页</p> </a> <a> <span class="font"></span> <p>发现</p> </a> <a> <span class="font"></span> <p></p> </a> <a> <span class="font"></span> <p>我的</p> </a> <a> <span class="font"></span> <p>退出</p> </a> </div> </div> </body> </html> main.css代码

* { padding: 0; margin: 0; } /* 从demo.html运行后页面的第一步中复制过来的 */ @font-face {font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); /* IE9*/ src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */ url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .box { position: relative; width: 400px; height: 500px; border: 1px solid darkgrey; margin: 50px auto; } .Title { background-color: #0dc441; font-size: 27px; color: white; text-align: center; } #userName, #pasword { width: 350px; height: 30px; border: none; border-bottom: 1px solid darkgray; /*选中边框*/ outline: none; margin-top: 20px; font-size: 17px; position: relative; left: 25px; } .pRegister{ margin-left: 25px; margin-top: 20px; } .pRegister a{ color: #0dc441; } .submit{ margin-left: 25px; margin-top: 25px; } .serchDiv{ /*文本相关的标签，只要父布局控制文本居中就可以了*/ text-align: center; } /*应用本地声明的字体*/ .font{ font-family: iconfont; } .footer a{ /*变成一行*/ float:left; width: 20%; text-align: center; /*子元素会继承父元素的字体*/ font-size: 200%; color: #ccc; /*去掉a标签的下划线*/ text-decoration:none; } .footer a p{ font-size: 18px; } .footer{ width: 100%; position: absolute; bottom: 0; border-top: 2px solid #ccc; } .footer a:nth-child(3) span{ font-size: 150%; border: 2px solid #ccc; border-radius: 50%; } /*被点击字体改变颜色*/ .footer a:active{ color: #0DC441; } 运行效果图：

第四天20170507

小项目实战：明星资料卡

目录结构：

运行效果：

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>明星资料卡</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <div class="box">  <figure class="view1"> <img src="img/1.png" /> <figcaption> <h2>Billboard三首排行第一</h2> <p class="p1">Shake It Off</p> <p class="p2">Black Space</p> <p class="p3">Bad Blood</p> </figcaption> </figure> <figure class="view2"> <img src="img/2.png" /> <figcaption> <h2>Taylor Swift</h2> <p class="p1">Birthday:1989.12.13</p> <p class="p2">Height:180cm</p> <p class="p3">Weight:56kg</p> </figcaption> </figure> <figure class="view3"> <img src="img/3.png" /> <figcaption> <h2>Back To December</h2> <p class="p1">I'm so glad you made time to see me. How's life, tell me how's your family? I haven't seen them in a while. You've been good, busier then ever. We small talk, work and the weather Your guard is up and I know why.</p> </figcaption> </figure> <figure class="view4"> <img src="img/4.png" /> <figcaption> <figcaption> <h2>1989</h2> <div class="rotate"></div> <p class="p1">Taylor Swift《1989》</p> </figcaption> </figcaption> </figure> <figure class="view5"> <img src="img/5.png" /> <figcaption> <h2>Taylor Swift-《22》</h2> <p class="p1">I don't know about you, but I’m feeling 22, Everything will be alright if you keep me next to you, You don't know about me, but I bet you want to, Everything will be alright if we just keep dancing like we're... 22</p> <div class="square"></div> </figcaption> </figure> <figure class="view6"> <img src="img/6.png" /> <figcaption> <h2>Out of the Woods</h2> </figcaption> </figure> <figure class="view7"> <img src="img/7.png" /> <figcaption> <div class="div1"></div> <div class="div2"></div> </figcaption> </figure> <figure class="view8"> <img src="img/8.png" /> <figcaption> <h2>Taylor Swift</h2> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </figcaption> </figure> <figure class="view9"> <img src="img/9.png" /> <figcaption> </figcaption> </figure> </div> </body> </html>

main.css

* { margin: 0; padding: 0; } .box { margin: 50px auto; } figure { width: 33%; max-height: 400px; /*从左往右排成一行。宽度不够的情况就会换行*/ float: left; /*超出边界的部分隐藏*/ overflow: hidden; position: relative; } h2, p { position: absolute; } .view1 h2 { top: 50px; left: 50px; color: white; transform: translateX(20px); } .view1 .p1 { left: 50px; top: 120px; color: white; background-color: blue; transform: translateY(500px); } .view1 .p2 { left: 50px; top: 170px; color: white; background-color: blue; transform: translateX(400px); } .view1 .p3 { left: 50px; top: 220px; color: white; background-color: blue; transform: translateX(-300px); } figure, h2, p { transition: all 0.5s; } .view1:hover { transform: translateX(50px); } /*hover后面接标签就是指定标签的css,没有就是改变自己的css*/ /*动画的相对位置和相对定位一样,永远都是相对自己的位置*/ .view1:hover h2 { transform: translateX(0px); } .view1:hover .p1 { transform: translateY(0px); } .view1:hover .p2 { transform: translateX(0px); } .view1:hover .p3 { transform: translateX(0px); } /*======================================*/ .view2 h2 { top: 70px; left: 120px; color: lawngreen; transform: translateY(20px); } .view2 .p1 { left: 70px; top: 120px; background-color: white; transform: translateX(-300px); } .view2 .p2 { left: 70px; top: 170px; background-color: white; transform: translateX(-400px); transition-delay: 0.2s; } .view2 .p3 { left: 70px; top: 220px; background-color: white; transform: translateX(-500px); transition-delay: 0.4s; } .view2:hover { transform: translateX(50px); /*透明度：范围0~1*/ opacity: 0.8; } .view2:hover h2 { transform: translateX(0px); } .view2:hover .p1 { transform: translateY(0px); } .view2:hover .p2 { transform: translateX(0px); /*动画延时*/ } .view2:hover .p3 { transform: translateX(0px); } /*第三个======================================*/ .view3 h2 { top: 100px; left: 100px; transform: translateY(-300px); } .view3 .p1 { left: 50px; top: 170px; transform: translateY(500px); } .view3:hover img { transform: translateY(-20px); /*透明度：范围0~1*/ opacity: 0.8; } .view3:hover h2 { transform: translateX(0px); } .view3:hover .p1 { transform: translateY(0px); } /*第四个======================================*/ .view4 h2 { top: 50px; left: 20px; transform: translateY(20px); opacity: 0; color: white; } .view4 .p1 { bottom: 45px; right: 50px; transform: translateY(20px); /*设置为不可见*/ /*display:none;*/ opacity: 0; } /*div控制的小白块三角*/ .view4 .rotate { position: absolute; top: 100%; left: 30%; background-color: white; width: 450px; height: 200px; /*transform: rotate(-20deg);*/ /*改变旋转的中心点*/ transform-origin: 0 0; transition: all 0.7s } .view4:hover .rotate { transform: rotate(-18deg); } .view4:hover h2 { opacity: 1; transform: translateX(0px); } .view4:hover .p1 { opacity: 1; transform: translateY(0px); } /*第五个======================================*/ .view5 h2 { top: 80px; left: 50px; } .view5 .p1 { width: 330px; top: 150px; left: 50px; } /*白框*/ .view5 .square { position: absolute; top: 60px; left: 45px; width: 340px; height: 250px; border: 2px solid white; transform: translateX(-400px) rotate(-600deg); transition: all 0.5s; transform-origin: 10% 20%; } .view5:hover .square { transform: translateX(0) rotate(0); } /*第六个======================================*/ .view6 h2 { top: 260px; left: 140px; transform: rotate(-750deg) scale(0); transition: all 1s; } .view6:hover h2 { transform: rotate(-30deg) scale(1); } .view6:hover img { transform: scale(1.2); opacity: 0.5; } /*第7个======================================*/ .view7:hover img { transform: scale(0.6); transform-origin: 120px 250px; } .view7 div { position: absolute; transition: all 0.6s; } .view7 .div1 { top: 95px; left: 70px; width: 0px; height: 180px; border-top:3px solid white; border-bottom:3px solid white; opacity: 0; } .view7 .div2 { top: 70px; left: 95px; width: 180px; height: 0px; border-left:3px solid white; border-right:3px solid white; opacity: 0; } .view7:hover .div1{ width: 250px; opacity: 1; } .view7:hover .div2{ height: 250px; opacity: 1; } /*第8个======================================*/ .view8 h2 { top:500px; left:40px; transform-origin: 20% -300%; transition-delay: 0.5s; } .view8 div { position: absolute; transition: all 0.5s; } .view8 .div1 { top: 25%; left: 18%; width: 0px; height: 2px; background-color: white; } .view8 .div2 { top: 18%; left: 30%; width: 2px; height: 0px; background-color: white; } .view8 .div3 { bottom: 25%; left: 18%; width: 0px; height: 2px; background-color: white; } .view8 .div4 { top: 18%; right: 30%; width: 2px; height: 0px; background-color: white; } .view8:hover .div1{ width: 250px; } .view8:hover .div2{ height: 250px; } .view8:hover .div3{ width: 250px; } .view8:hover .div4{ height: 250px; } .view8:hover h2 { top: 200px; left: 245px; transform:rotate(360deg); } /*第9个======================================*/ .view9:hover { transform:rotate(-30deg); }

第五天20170508

简单动画

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { position: absolute; width: 200px; height: 200px; background-color: black; border:9px solid darkgoldenrod; /* 1.自己定义的动画名 2.动画执行时间 3.执行次数（infinite无限执行） */ animation: squar 2s infinite; /*延迟执行*/ animation-delay: 3s; } /*backColor:给这个动画取个名字*/ /*大括号里面写css*/ @keyframes backColor { /*from代表0%*/ from { background-color: red; left: 100px; } /*to代表100%*/ to { background-color: green; left: 400px; } } @keyframes squar { 0% { left: 0px; top: 0px; transform: rotate(300deg) scale(0); } 25% { left: 500px; top: 0px; transform: rotate(-300deg) scale(1); } 50% { left: 500px; top: 500px; transform: rotate(300deg) scale(0); } 75% { left: 0px; top: 500px; transform: rotate(-300deg) scale(0.1); } 100% { left: 0px; top: 0px; } } </style> </head> <body> <div class="box"></div> </body> </html> 动画加载图标小项目

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <div class="boxs">  <div class="box box1"> <div class="container"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> </div> </div> <div class="box box2"> <div class="container"> <div class="div1"></div> </div> </div> <div class="box box3"> <div class="container"> <div class="div1"></div> <div class="div2"></div> </div> </div> <div class="box box4"> <div class="container"> <div class="div1"></div> <div class="div2"></div> </div> </div> <div class="box box5"> <div class="container"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </div> <div class="box box6"> <div class="container"> </div> </div> </body> </html> main.css

* { margin: 0px; padding: 0px; } body { background-color: #333; } .boxs { width: 1100px; margin: 50px auto; } .box { position: relative; width: 300px; height: 300px; background-color: black; float: left; margin: 20px; } .container { position: absolute; width: 120px; height: 90px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .box1 .container div { background-color: #67CF22; height: 90px; width: 20px; float: left; margin-right: 4px; animation: scaleYBar 0.7s infinite; } .box1 .container .div1 { animation-delay: 0.2s; } .box1 .container .div2 { animation-delay: 0.3s; } .box1 .container .div3 { animation-delay: 0.4s; } .box1 .container .div4 { animation-delay: 0.5s; } .box1 .container .div5 { animation-delay: 0.6s; } @keyframes scaleYBar { 0% { transform: scaleY(1); } /*百分比越小相当于提前播放*/ 20% { transform: scaleY(2); background-color: #fff; } 100% { transform: scaleY(1); } } /*=====================*/ /*上面已经把container已经设置居中了*/ .box2 .container { height: 120px; } .box2 .container .div1 { width: 100%; height: 100%; background-color: #67CF22; border-radius: 50%; animation: rotateCircle 1s infinite; } @keyframes rotateCircle { 0% { transform: rotateX(180deg) rotateY(0deg); } 50% { transform: rotateX(180deg) rotateY(180deg); background-color: white; } 100% { transform: rotateX(0deg) rotateY(180deg); } } /*第3个=====================*/ .box3 .container { height: 120px; } .box3 .container div { position: absolute; width: 100%; height: 100%; background-color: #67CF22; border-radius: 50%; animation: scaleCircle 1s infinite; } /** * 强调：分析动画，再怎么复杂，都值优先考虑其中一个div的动态 * 延迟时间必须是整个时间的一半，才刚刚好放一个最大，另一个最小。 */ .box3 .container .div2 { opacity: 0.5; animation-delay: 0.5s; } @keyframes scaleCircle { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } /*第4个=====================*/ .box4 .container { height: 120px; } .box4 .container div { position: absolute; width: 50%; height: 50%; background-color: #67CF22; animation: squareMove 2s infinite; } .box4 .container .div2 { animation-delay: 1s; } @keyframes squareMove { 0% { transform: translateX(0px) translateY(0px) scale(1) rotate(0deg); } 25% { transform: translateX(60px) translateY(0px) scale(0.2) rotate(-90deg); } 50% { transform: translateX(60px) translateY(60px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(60px) rotate(-270deg); } 100% { transform: translateX(0px) translateY(0px) rotate(-360deg); } } /*第5个=====================*/ .box5 .container { width: 150px; height: 30px; } .box5 .container div { width: 30px; height: 30px; background-color: #67CF22; margin-left: 15px; border-radius: 50%; float: left; animation: circleMove 1s infinite; } .box5 .container .div1 { animation-delay: 0s; } .box5 .container .div2 { animation-delay: 0.25s; } .box5 .container .div3 { animation-delay: 0.5s; } @keyframes circleMove { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } JavaScript输出和方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body>  <script type="text/javascript"> //定义一个变量,并且赋值 var a = 1; //1.在控制台上打印 console.log("Hello World"); //2.弹窗 //alert("你好"); //方法 function plus(x, y) { var z = x + y; console.log(z); } plus(3, 4); //带返回值的 function reduce(x, y) { var z = x - y; return z; } var result = reduce(5, 6); console.log("result=" + result); //方法直接赋值给变量(注意：调用必须在赋值之后) var mutip = function(x, y) { var z = x * y; return z; } console.log(mutip(4, 5)); //方法当做参数传 function mix(fn, y) { var z = fn(5, 7) + y; return z; } //alert(mix(reduce, 8)); </script> </html> JavaScript获取标签属性和修改

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #img1{ width: 100px; height: 100px; } </style> </head> <body> <p id="p1">初始文本</p> <p id="p2">初始化文本</p> <p class="p3">第三个</p> <p class="p3">第三个</p> <p class="p3">第三个</p> </body> <script type="text/javascript"> //通过id获取标签文本 var p1 = document.getElementById("p1"); var p2 = document.getElementById("p2"); var text = p1.innerText; console.log(text); //修改文本,会吧引号中的字符串当成纯文本输出; p1.innerText = "修改过了"; //输出会解析文本中的html标签 p2.innerHTML = "<h2 id='h'>你好</h2>"; document.getElementById("h").innerText = "文本被修改" //单个生成标签 //参数是标签名 var imgView = document.createElement("img"); //给img设置图片 imgView.src = "img/2.jpg"; //设置id imgView.id = "img1"; //添加到到p2标签 p2.appendChild(imgView); //class======================================== /** * getElementsByClassName得到的是包含这个class名的所有标签的数组。 * 得到的是p3(三个p3，中间的索引1) */ var p3 = document.getElementsByClassName("p3")[1]; p3.innerText="我在中间"; </script> </html>

第六天20170509

js获取并修改标签属性，js监听器

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="text" id="userName" value="用户名" /> <input type="button" id="login" value="提交" /> <input type="button" id="login2" οnclick="clickLog()" value="提交2" /> </body> <script type="text/javascript"> var userName = document.getElementById("userName"); //1.获取输入框中的文本 var text = userName.value; //alert(text); //2.修改文本框里的值 userName.value = "你好"; /** * 设置监听器:所有的标签都可以设置onclick */ var login = document.getElementById("login"); login.onclick = function() { alert(userName.value); } function clickLog() { alert(userName.value); } </script> </html> js修改css属性

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" style="width: 300px; height: 300px; background-color: red;"></div> </body> <script type="text/javascript"> var div1 = document.getElementById("div1"); //style标签的属性 div1.style.width="700px"; /** * css里面带有中划线的样式名，在JavaScript里面变成了驼峰命名 */ div1.style.backgroundColor="#0ff000"; </script> </html>

练习小项目打地鼠

项目目录结构：

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/mian.css" /> </head> <body> <marquee hehavior="alternate">打地鼠</marquee> <div class="but"> <button οnclick="begin()">开始</button> <button οnclick="end()">暂停</button> </div> <div class="box"> <div class="mole" οnclick="hitMole(this)"></div> <div class="mole" οnclick="hitMole(this)"></div> <div class="mole" οnclick="hitMole(this)"></div> <div class="mole" οnclick="hitMole(this)"></div> <div class="mole" οnclick="hitMole(this)"></div> <div class="mole" οnclick="hitMole(this)"></div> <div class="mole" οnclick="hitMole(this)"></div> <div class="mole" οnclick="hitMole(this)"></div> <div class="mole" οnclick="hitMole(this)"></div> </div> <p>得分: <span id="score">0</:span></p> </body> <script src="js/main.js" type="text/javascript" charset="utf-8"></script> </html>

main.css

marquee{ margin-top:50px; font-weight: 500px; font-size: 50px; /*字体粗细*/ font-weight: 500px; } .box{ width:330px; height: 330px; margin: 100px auto; margin-top:0px; } .box div{ width:100px; height: 100px; background-color: #DEB887; float: left; margin:5px; background: url(../img/bg.jpg); } p{ text-align: center; } .but{ width:190px; heith:40px; margin: 50px auto; } .but button{ width:90px; float: left; } main.js

//所有地鼠div var moles = document.getElementsByClassName("mole"); //分数span var scoreSpan = document.getElementById("score"); //记录得分 var score = 0; var lastIndex = 0; function showMole() { /** * Math.random()产生一个随机数范围(0,1); * Math.floor()向下取整 * moles.lenght = 9 表示数组的长度 */ var showIndex = Math.floor(Math.random() * moles.length); //通过索引获得一个div var mole = moles[showIndex]; lastIndex = showIndex; //显示小老鼠 mole.style.backgroundImage = "url(img/mole.gif)"; } //检查是否是小老鼠 function checkMole() { var tag = moles[lastIndex]; //判断是不是小老鼠 //判断这个字符串里面是否含有mole，有的话返回mole的索引一定大于-1 if (tag.style.backgroundImage.indexOf("mole") > -1) { tag.style.backgroundImage = "url(img/bg.jpg)"; } } var randomShowMole=null; var isStart=false; //开始 function begin() { //每次开始之前停止一下之前的游戏。防止多次点击开始 end(); isStart=true; //开始游戏 randomShowMole = setInterval(function() { checkMole(); showMole(); }, 500); } //暂停 function end() { // 取消定时器 clearInterval(randomShowMole); isStart=false; } function hitMole(obj) { if(!isStart){ return; } if (obj.style.backgroundImage.indexOf("mole") > -1) { //得分 score++; //重置背景 obj.style.backgroundImage = "url(img/bg.jpg)"; // checkMole(); // showMole(); } else { score--; } //显示得分 scoreSpan.innerText = score; }

运行效果：

第七天20170510

js通过Selector

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

</head>

<body>

<p class="p1">第一个段落</p>

<p class="p1">第二个段落</p>

<divclass="div1">

<p>第二个段落</p>

<p>第三个段落</p>

</div>

<p id="p1">我是id标记的p</p>

</body>

<scripttype="text/javascript">

//css语法

//永远只会返回匹配的第一个

varp1=document.querySelector(".p1");

p1.innerText="修改第一个";

//修改第二个class为p1的文本

//这个方法,返回匹配的元素,是个数组。

varp2=document.querySelectorAll(".p1")[1];

p2.innerText="修改第二个";

//把“第三个段落”改成“第3个段落”

varp3=document.querySelectorAll(".div1 p")[1];

p3.innerText="第3个段落";

varp4=document.querySelectorAll("#p1")[0];

p4.innerText="这里修改了id标记的p标签";

</script>

</html>

jQuery的基本使用

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

</head>

<body>

<divclass="div1">1</div>

<divclass="div2">2</div>

<divclass="div3">3</div>

<divclass="div4">4</div>

</div>

<buttonid="submit">提交</button>

</body>

<scriptsrc="js/jquery-1.11.0.js" type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

//$就代表jQuery对象

//css语法选择标签：返回的是jQuery对象,不是dom元素,找到的是所有匹配。

$(".box.div1").text("第一个");//相当于js中的innerText

$(".box.div2").html("<h2>第二个</h2>"); //相当于js中的innerHtml

//获得标签上面的文本

var text = $(".box.div1").text();

console.log(text);

//获得第几个dom元素。备注：获得的是纯dom,非jQuery

var div4 = $(".boxdiv").get(3);

div4.innerText = "第四个";

//修改css:语法类似css,属性之间用","分割

var div3 = $(".box.div3").css({

"width":"300px",

"height":"300px",

"background-color":"blue",

"position":"absolute"

});

//设置监听器

$("#submit").click(function(){

alert("点击了我")

});

//动画

/**

* 参数1,动画所要达到的效果；

* 参数2,动画执行时间。

* 参数3,动画执行完成后执行的方法。

$(".box.div3").animate({left:"200px"},1000,function(){

alert("动画完成！");

});

</script>

</html>

第八天20170511

视频音频的插入

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

</head>

<body>

<buttonid="start">开始</button>

<buttonid="pause">暂停</button>

</body>

<scripttype="text/javascript">

var vido =document.getElementById("video");

var start =document.getElementById("start");

var pause =document.getElementById("pause");

start.οnclick=function(){

//如果停止,则播放

if(video.paused){

video.play();

}

pause.οnclick=function(){

//如果正在播放,则停止

if(!video.paused){

video.pause();

}

</script>

</html>

h5中画布元素使用

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

</head>

<body>

<canvasid="canvas"></canvas>

</body>

<scripttype="text/javascript">

//画布

var canvas =document.getElementById("canvas");

canvas.width = 500;

canvas.height = 500;

canvas.style.backgroundColor ="blue";

//获得画笔

var context =canvas.getContext("2d");

//画笔设置颜色

//边框颜色（线条）

context.strokeStyle ="red";

//1.画条线。

//开始路径

context.beginPath()

//设置线的粗细

context.lineWidth = 10;

//第一个点定位

context.moveTo(0, 0);

//第二哥点,划到的点

context.lineTo(100, 100);

context.closePath();

//填充路径

context.stroke();

//2.画矩形

//填充颜色内部

context.fillStyle ="aqua";

context.beginPath();

/**

* 第一，第二个参数：代表左上角

* 第三个参数：宽度

* 第四个参数：高度

context.rect(200, 200, 200, 200);

context.closePath();

//边框

context.stroke();

//填充内部

context.fill();

//3.画三角形

context.beginPath();

context.moveTo(50, 100);

context.lineTo(50, 200);

context.lineTo(100, 150);

context.lineTo(50, 100);

context.closePath();

context.stroke();

context.fill();

//4.画圆

context.beginPath();

/**

* 第一个第二个参数：圆心

* 第三个参数：半径

* 第四个角度：起始

* 第五个结束：结束

context.arc(300, 100, 50, 0, 2 *Math.PI);

context.closePath();

context.stroke();

//5：写文字

//设置字体：此出如果设置一定要带上字体大小和字体。

context.font = "30px 宋体";

context.beginPath();

//第一个参数：文本，第二个，第三个:文本位置

context.fillText("你好！", 300, 450);

context.closePath();

//6：画图片

// var img=new Image();

// img.src="img/5.jpg";

var img =document.getElementById("img");

img.onload = function() {

context.beginPath();

context.drawImage(img,300, 100);

context.closePath();

}

//清空

document.getElementById("btn").οnclick= function() {

//清空某一个区域(图片清理不掉，是因为加载需要时间。需要在图片的onclick中清空)

context.clearRect(0, 0,canvas.width, canvas.height);

}

//延时器

//setTimeout(function(){

//context.clearRect(0,0,canvas.width,canvas.height);

//},1000);

</script>

</html>

画布元素使用小项目

运行结果：

index.html

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

</head>

<body>

</body>

</html>

main.js

第九天第十天：自己开发贪吃蛇项目

目录结构：

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>贪吃蛇</title> <link rel="stylesheet" type="text/css" href="css/main.css"/> </head> <body> <audio src="audio/snack.mp3" autoplay loop></audio> <div class="container"> <div class="ground"> </div> <div class="control"> <span class="banner">无限组合</span> <ul class="speed"> <li οnclick="gread1()">一级</li> <li οnclick="gread2()">二级</li> <li οnclick="gread3()">三级</li> <li οnclick="sub_v()">减速</li> <li οnclick="add_v()">加速</li> </ul> 速度:<span class="speed_v"></span> <span class="score"></span> <div class="buttons"> <button id="start">开始/结束</button> <button id="purse">暂停/恢复</button> </div> </div> <div class="intro"> <h4>游戏说明:</h4> <p>上下左右键控制蛇的转向.一级,二级,三级都代表速度,三级速度最高。也可以直接点击加速(add-v，快捷键A)或减速(sub-v，快捷键S).不要撞到仙人掌哦</p> </div> </div> </body> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/main.js" type="text/javascript" charset="utf-8"></script> </html> main.css

.container { /*避免蛇定位到.ground外边*/ position: relative; width: 1000px; margin: 0 auto; } .ground { positon: relative; width: 100%; height: 500px; background: url(../img/background.jpg) no-repeat; } .control { width: 100%; height: 60px; line-height: 60px; background-color: #cce290; } .banner { float: left; margin-left: 10px; font-size: 18px; } .buttons { float: right; margin-right: 10px; } .speed { float: left; margin: 10px auto; height: 40px; /*去掉无序列表中的格式*/ list-style-type: none; line-height: 40px; text-align: center; } .speed li { background-color: #f6ff9f; float: left; width: 60px; heith: 100%; margin-right: 12px; border-radius: 40%; } .speed li:hover { background-color: yellow; } .speed li:active { background-color: red; } .intro { width: 100%; height: 50px; position: relative; background: url(../img/key.jpg) no-repeat; background-color: #CCE290; } .intro h4 { position: absolute; left: 220px; } .intro p { position: absolute; left: 320px; margin-top: 0px; } .food { position: absolute; background: #8b0 url(../img/body.gif); transform: scale(1.3); } .eagle{ width: 100px; height: 100px; /*属性规定当内容溢出元素框时发生的隐藏事情。*/ overflow: hidden; border:1px dotted red; } .block { width: 20px; height: 20px; /*属性规定当内容溢出元素框时发生的隐藏事情。*/ overflow: hidden; } .snake-block { position: absolute; background: red; } .speed_v { width: 200px; } #h-down, #t-down { transform: rotate(90deg); } #h-up, #t-up { transform: rotate(-90deg); } #h-left, #t-left { transform: rotate(180deg); } main.js

//获得贪吃蛇活动范围的div var ground = $(".ground"); //获得计分元素 var aSpan = $(".score"); //定义蛇数组 var snakerAry = []; //声名全局变量存放当前食物 var oFood; //存放障碍物数组.要放到createCactus();前面。先声名后使用 var cactusAry = new Array(); //对吃过的食物计数，初始化为0； var sum = 0; //蛇头移动方向，默认为右 var moveDir = "right"; //存放创建的定时器 var timer; //游戏运行状态标记 var runing = false; //是否点过“开始”按钮标记 var begin = false; //获取开始/结束标签 var oStart = $("#start"); //获取暂停/恢复标签 var oPurse = $("#purse"); //获得显示速度的标签 var speed_v = $(".speed_v"); //定时器设置时间，控制速度 var perTime = 300; //显示速度 speed_v.html(1000 - perTime); //鹰距离左边的距离 var eagleLeft; //鹰距离上边的距离 var eagleTop //创建蛇================================================================================================================================= //i从3开始主要是定位用的 for (var i = 3; i > 0; i--) { //创建div标签 var tempDiv = $("<div/>"); tempDiv.css({ "left": i * 20 + "px", "top": "60px" }); /** * addClass(向被选元素添加一个或多个类名); */ tempDiv.addClass("block snake-block"); if (i == 3) { tempDiv.css({ "background": "url(img/head.png)", //以使背景图像完全覆盖背景区域 "background-size": "cover" }); } else if (i == 2) { tempDiv.css({ "background": "url(img/body.png)", "background-size": "cover" }); } else { tempDiv.css({ "background": "url(img/tail.png)", "background-size": "cover" }); } //获得属性值 //alert(tempDiv.attr("class")); //css() 方法设置或返回被选元素的一个或多个样式属性 //alert(tempDiv.css("left")); snakerAry.push(tempDiv); ground.append(tempDiv); } //生成随机坐标。格式是数字(主要是创建障碍物和食物时用到)====================================================================================================== function divPoint() { var iLeft, iTop; var flag = false; do { /** * 生成随机点距离left和top的距离 * 应为class为ground的div宽1000,高500. * 而每个图片是20*20的 */ iLeft = Math.floor(Math.random() * 50) * 20; iTop = Math.floor(Math.random() * 25) * 20; //判断创建食物的位置是否和蛇身重合 for (var i = 0; i < snakerAry.length; i++) { //css() 方法设置或返回被选元素的一个或多个样式属性。 if (iLeft == parseInt(snakerAry[i].css("left")) && iTop == parseInt(snakerAry[i].css("top"))) { flag = true; break; } } } while (flag) //返回两个参数 return { iLeft: iLeft, iTop: iTop }; } //创建鹰================================================================================================================================ //创建鹰标签 var eagle = $("<div/>"); eagleLeft = Math.floor(Math.random() * 10) * 100; eagleTop = Math.floor(Math.random() * 5) * 100; while (eagleLeft < 100 || eagleTop < 100) { eagleLeft = Math.floor(Math.random() * 10) * 100; eagleTop = Math.floor(Math.random() * 5) * 100; } eagle.css({ "left": eagleLeft + "px", "top": eagleTop + "px", "background": "url(img/eagle.gif)", //以使背景图像完全覆盖背景区域 "background-size": "cover" }); /** * addClass(向被选元素添加一个或多个类名); */ eagle.addClass("eagle snake-block"); ground.append(eagle); //创建障碍物============================================================================================================================== // 先创建障碍物，是因为食物会多次创建，并不能和障碍物重合，所以要先确定障碍物 function createCactus() { for (var i = 0; i < 5; i++) { var cactus = $("<div/>"); //不让左上角周围有障碍物 var Left = divPoint().iLeft; var Top = divPoint().iTop; while (Left < 100 || Top < 100) { Left = divPoint().iLeft; Top = divPoint().iTop; } cactus.css({ "left": Left + "px", "top": Top + "px", "background": "url(img/cactus.png)", "background-size": "cover" }); cactus.addClass("block food"); cactusAry.push(cactus); ground.append(cactus); } } //调用生成障碍物 createCactus(); //判断是否和障碍物重合,Left,Top是数字========================================================================================== function coincide(Left, Top) { var state = false; for (var i = 0; i < cactusAry.length; i++) { if (Left == parseInt(cactusAry[i].css("left")) && Top == parseInt(cactusAry[i].css("top"))) { state = true; break; } } return state; } //创建食物================================================================================================================ function createFood() { oFood = $("<div/>"); var num = Math.floor(Math.random() * 4); //避免在障碍物上创建食物 var Left = divPoint().iLeft; var Top = divPoint().iTop; while (coincide(Left, Top).state) { Left = divPoint().iLeft; Top = divPoint().iTop; } oFood.css({ "left": Left + "px", "top": Top + "px" }); switch (num) { case 0: oFood.css({ "background": "url(img/gold.png)", "background-size": "cover" }); break; case 1: oFood.css({ "background": "url(img/berries.png)", "background-size": "cover" }); break; case 2: oFood.css({ "background": "url(img/peach.png)", "background-size": "cover" }); break; default: oFood.css({ "background": "url(img/apple.png)", "background-size": "cover" }); break; } oFood.addClass("block food"); ground.append(oFood); } createFood(); //食物添加到尾巴的前面后,计算尾巴现在应有的坐标，单位是数字======================================================================== function priTail(headLeft, headTop, tailLeft, tailTop, moveDir) { // 竖方向添加 if (tailLeft == headLeft || moveDir == "right" || moveDir == "left") { if (tailTop > headTop) tailTop -= 20; else if (tailTop < headTop) tailTop += 20; } else if (tailTop == headTop || moveDir == "up" || moveDir == "down") { //横方向添加 if (tailLeft > headLeft) tailLeft -= 20; else if (tailLeft > headLeft) tailLeft += 20; } return { tailTop: tailTop, tailLeft: tailLeft }; } //蛇和鹰移动===================================================================================================================== function move() { //获得蛇头 var snakeHead = snakerAry[0]; //蛇距离左边距离，数字 var headLeft = parseInt(snakeHead.css("left")); //蛇距离顶部距离，数字 var headTop = parseInt(snakeHead.css("top")); /** * 蛇身移动 * 先移动蛇身，因为需要用到蛇头 */ for (var i = snakerAry.length - 1; i > 0; i--) { snakerAry[i].css({ "top": snakerAry[i - 1].css("top"), "left": snakerAry[i - 1].css("left") }); } //蛇头移动 switch (moveDir) { case "left": headLeft -= 20; break; case "right": headLeft += 20; break; case "up": headTop -= 20; break; case "down": headTop += 20; break; } snakerAry[0].css({ "left": headLeft + "px", "top": headTop + "px" }); //当蛇头方向变时旋转蛇头，这里通过改变id。然后通过css旋转的。 snakerAry[0].attr("id", "h-" + moveDir); //与蛇身相撞结束游戏 for (var i = 1; i < snakerAry.length; i++) { if (headLeft == parseInt(snakerAry[i].css("left")) && headTop == parseInt(snakerAry[i].css("top"))) { reStart(); } } /** * 鹰移动，上下左右，或不动 */ var eagleMove = Math.floor(Math.random() * 5); eagleLeft = parseInt(eagle.css("left")); eagleTop = parseInt(eagle.css("top")); //增加和蛇头向心力 if (eagleLeft > headLeft && eagleLeft > 6) { eagleLeft -= 6; } else { if (eagleLeft < headLeft && eagleLeft <= 894) { eagleLeft += 6; } } if (eagleTop > headTop && eagleTop > 4) { eagleTop -= 4; } else { if (eagleTop < headTop && eagleTop <= 396) { eagleTop += 4; } } //随机移动 switch (eagleMove) { case 0: if (eagleTop > 20) { eagleTop -= 20; } break; case 1: if (eagleTop <= 380) { eagleTop += 20; } break; case 2: if (eagleLeft > 20) { eagleLeft -= 20; } break; case 3: if (eagleLeft <= 880) { eagleLeft += 20; } break; default: break; } eagle.css({ "left": eagleLeft + "px", "top": eagleTop + "px" }); //撞墙游戏结束 if (headLeft < 0 || headTop < 0 || headTop >= 500 || headLeft >= 1000) { reStart(); return; } //撞障碍物游戏结束 if (coincide(headLeft, headTop)) { reStart(); return; } //鹰和蛇任何位置相撞，游戏结束 eagleLeft1 = parseInt(eagle.css("left")); eagleTop1 = parseInt(eagle.css("top")); for (var i = 0; i < snakerAry.length; i++) { var sLeft = parseInt(snakerAry[i].css("left")); var sTop = parseInt(snakerAry[i].css("top")); if (sLeft >= eagleLeft1 && sLeft < (eagleLeft1 + 100) && sTop >= eagleTop1 && sTop < (eagleTop1 + 100)) { reStart(); return; } } //获取当前的尾巴方向,调整尾巴的方向 var snakeTail = snakerAry[snakerAry.length - 1]; var tailLeft = parseInt(snakeTail.css("left")); var tailTop = parseInt(snakeTail.css("top")); if (tailTop < parseInt(snakerAry[snakerAry.length - 2].css("top"))) { snakeTail.attr("id", "t-down"); } else if (tailTop > parseInt(snakerAry[snakerAry.length - 2].css("top"))) { snakeTail.attr("id", "t-up"); } if (tailLeft > parseInt(snakerAry[snakerAry.length - 2].css("left"))) { snakeTail.attr("id", "t-left"); } else if (tailLeft < parseInt(snakerAry[snakerAry.length - 2].css("left"))) { snakeTail.attr("id", ""); } //吃到的食物添加到尾巴的前面，分别改变尾巴和食物的定位坐标值 if (headLeft == parseInt(oFood.css("left")) && headTop == parseInt(oFood.css("top"))) { //添加蛇身 tailLeft = parseInt(snakeTail.css("left")); tailTop = parseInt(snakeTail.css("top")); oFood.attr("class", "block snake-block"); oFood.css({ "background": "url(img/body.png)", "top": tailTop + "px", "left": tailLeft + "px" }); sum++; /** * arrayObject.splice(index,howmany,item1,.....,itemX) 参数描述 index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, ..., itemX 可选。向数组添加的新项目。 */ snakerAry.splice(snakerAry.length - 1, 0, oFood); aSpan.html("已吃食物" + sum + "个"); //修改尾巴 tailTop = priTail(headLeft, headTop, tailLeft, tailTop, moveDir).tailTop; tailLeft = priTail(headLeft, headTop, tailLeft, tailTop, moveDir).tailLeft; snakeTail.css({ "left": tailLeft + "px", "top": tailTop + "px" }); //重新生成食物 createFood(); } } //开始(恢复)或结束================================================================================================================== oStart.click(function() { if (!runing) { //打开定时器 openTimer(); begin = true; runing = true; } else { var msg = confirm("结束游戏成绩将清空,确定结束吗！"); if (msg) { clearInterval(timer); //重新加载页面 window.location.reload(); } } }); //暂停和恢复=========================================================================================================================== oPurse.click(function() { if (runing) { clearInterval(timer); runing = false; } else { //只有点过开始的状态，才可以恢复 if (begin) oStart.click(); } }); //定时器============================================================================================================================ function openTimer() { timer = setInterval(function() { //开始移动 move(); }, perTime); } //改变速度=========================================================================================================================== //一级 function gread1() { //经测试这里需要先暂停下定时器 clearInterval(timer); perTime = 300; speed_v.html(1000 - perTime); if (runing) { openTimer(); } } //二级 function gread2() { clearInterval(timer); perTime = 100; speed_v.html(1000 - perTime); if (runing) { openTimer(); } } //三级 function gread3() { clearInterval(timer); perTime = 60; speed_v.html(1000 - perTime); if (runing) { openTimer(); } } //加速 function add_v() { clearInterval(timer); if (perTime > 100) { perTime = perTime - 50; speed_v.html(1000 - perTime); } if (runing) { openTimer(); } } //减速 function sub_v() { clearInterval(timer); if (perTime < 900) { perTime = perTime + 50; speed_v.html(1000 - perTime); } if (runing) { openTimer(); } } //重新开始========================================================================================================================= function reStart() { clearInterval(timer); //confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框 alert("此次游戏失败，要重新开始吗？"); clearInterval(timer); window.location.reload(); } //设置转向和加减速================================================================================================================== $(document).keydown(function(e) { e = e || window.event; var keyCode = e.which || e.keyCode; switch (keyCode) { case 37: if (moveDir != "right") { moveDir = "left"; } break; case 38: if (moveDir != "down") { moveDir = "up"; } break; case 39: if (moveDir != "left") { moveDir = "right"; } break; case 40: if (moveDir != "up") { moveDir = "down"; } break; case 65: //加速 add_v(); break; case 83: //减速 sub_v(); break; } });

运行效果：

转载请注明原文地址: https://www.6miu.com/read-5589.html

技术

最新回复(0)