7-18-Day16
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/c2e7b9b499c539f6fdc32b8b13059b3c63
<!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>
THE END
