7-18-Day16

it2022-05-05 115

JS：为了实现网页和用户之间进行简单的自主交互

Js的声明和引入：1、在head标签中使用script标签声明js代码 2、在head标签中引入声明好的js文件 JS是弱类型。Js运行在酷虎点时，使用弱类型可以节省在客户端存储数据时开辟的内容空间，提升效率。 TOM猫开发过程 1、防止同时按多个按钮时出错：

MyEclipse显示代码行数：

MyEclipse建立WEB项目实现解析接口

1、配置Tomcat环境 2、建立web项目 3、导入jar包 4、导入接口代码 5、进行接口解析

Servlet：

连接前/后台的桥梁将从接口获得的信息传到前端显示

用JS做的汤姆猫

GitHub地址：https://github.com/LYi9369/2019-Summer-Training/commit/c2e7b9b499c539f6f785311dc32b8b13059b3c63

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>汤姆猫</title> <style> /*对所有的图片都同时进行操作用*号*/ * { /*去掉外边框*/ margin: 0; /*去掉内边框*/ padding: 0; } #cat { /*让猫的图片平铺整个背景*/ width: 100%; height: 100%; } img { /*让猫全部都只在当前页面，而不用进行滑动*/ position: absolute; } #cymbal { right: 50px; bottom: 300px; } #drink { right: 50px; bottom: 200px; } #eat { right: 50px; bottom: 100px; } #fart { left: 50px; bottom: 300px; } #pie { left: 50px; bottom: 200px; } #scratch { left: 50px; bottom: 100px; } </style> <script> function cymbal1() { //创建start方法，读取cymbal1文件夹的所有图片 start("cymbal", 13); } function drink1() { start("drink", 80) } function eat1() { start("eat", 39) } function fart1() { start("fart", 27) } function pie1() { start("pie", 23) } function scratch1() { start("scratch", 55) } var timer = 0; 自定义start方法 function start(name, count) { var img = document.getElementById("cat");//获取初始的背景图片 // alert(img) var index = 0; timer = setInterval(function () { //读取图片 if (index < count) { // img.src = "img/game2/" + name + "/" + name + "_" + getIndex(index) + ".jpg"; img.src = "../../img/game2/" + name + "/" + name + "_" + getIndex(index) + ".jpg"; index++; } }, 100); } //所有图片的路径都是 img/game2/name/name_index.jpg // setInterval(function(){}, 100) 第一个参数是方法名，第二个方法是要在100毫秒内播放所有图片 function getIndex(index) { if (index < 10) { return "0" + index; } else { return index; } } </script> </head> <body> <img src="../../img/game2/angry/angry_00.jpg" id="cat"> <img src="../../img/game2/Buttons/cymbal/cymbal.png" id="cymbal" onclick="cymbal1();"/> <img src="../../img/game2/Buttons/drink/drink.png" id="drink" onclick="drink1();"> <img src="../../img/game2/Buttons/eat/eat.png" id="eat" onclick="eat1();"> <img src="../../img/game2/Buttons/fart/fart.png" id="fart" onclick="fart1();"> <img src="../../img/game2/Buttons/pie/pie.png" id="pie" onclick="pie1();"> <img src="../../img/game2/Buttons/scratch/scratch.png" id="scratch" onclick="scratch1();"> </body> </html>

专利

最新回复(0)