html puppies.html

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html puppies.html相关的知识,希望对你有一定的参考价值。

var puppies = ["Leonardo", "Michelangelo", "Donatello", "Raphael", "Splinter"];
var ages = ["1", "2", "2", "1", "3"];

function switchArray(myArray, index1, index2) {
  var newArray = myArray;
	var temp = newArray[index1];
	newArray[index1] = newArray[index2];
	newArray[index2] = temp;
	return newArray;
}

function averageAge(myArray) {
	var average = 0;
	for (var i = 0; i < myArray.length; i++) {
		average += myArray[i];
	}
	return average / myArray.length;
}

function sortArray(myArray) {
	var newArray = myArray;
	var temp = myArray[0];
	for (var x = newArray.length - 1; x >= 0; x--) {
		for (var y = 0; y < x - 1; y++){
			if (newArray[y] > newArray[y + 1]){
				temp = newArray[y];
				newArray[y] = newArray[y + 1];
				newArray[y + 1] = temp;
			}
		}
	}
	return newArray;
}

console.log(puppies);
console.log(ages);
switchArray(puppies, 0, 2);
console.log("switched puppies at 0 and 2");
console.log(puppies);
console.log("The average age is: " + averageAge(ages));
sortArray(puppies);
sortArray(ages);
console.log("After sorting the arrays they are: ");
console.log(puppies);
console.log(ages);




var growth = 0;
var move = 0;
var moveTop = 0;
var leftMargin = 0;
var topMargin = 0;

window.onload = function(){

  setInterval(doStuff, 1000);

	document.getElementById("biggerPuppies").onclick = function(event){
		if (growth < 0) {
			growth = 0;
		}
		growth += 1;
	}

	document.getElementById("smallerPuppies").onclick = function(event){
		if (growth > 0) {
			growth = 0;
		}
		growth += -1;
	}

	document.getElementById("movePuppiesRight").onclick = function(event){
		if (move < 0) {
			move = 0;
		}
		move += 1;
	}

	document.getElementById("movePuppiesLeft").onclick = function(event){
		if (move > 0) {
			move = 0;
		}
		move += -1;
	}

	document.getElementById("movePuppiesUp").onclick = function(event){
		if (moveTop > 0) {
			moveTop = 0;
		}
		moveTop += -1;
	}

	document.getElementById("movePuppiesDown").onclick = function(event) {
		if (moveTop < 0){
			moveTop = 0;
		}
		moveTop += 1;
	}

	document.getElementById("stopPuppies").onclick = function(event){
		growth = 0;
		move = 0;
		moveTop = 0;
	}
}

function doStuff() {
	document.getElementById("daPuppies").width += growth;
	leftMargin += move;
	document.getElementById("daPuppies").style.marginLeft = leftMargin + "px";
	topMargin += moveTop;
	document.getElementById("daPuppies").style.marginTop = topMargin + "px";
}
<html>
<head>
  <title>Puppies</title>
	<link rel="stylesheet" type="text/css" href="puppies.css">
	<script src="puppies.js"></script>
</head>
<body>
<center>
	<div class="top">
		<h1>Puppies - wait, is that a puppy?! </h1>
		<button id="biggerPuppies">Bigger Puppies</button>
		<button id="smallerPuppies" >Smaller Puppies</button>
		<button id="movePuppiesRight" >Move Puppies Right</button>
		<button id="movePuppiesLeft" >Move Puppies Left</button>
		<button id="movePuppiesUp" >Move Puppies Up</button>
		<button id="movePuppiesDown" >Move Puppies Down</button>
		<button id="stopPuppies" >Stop Puppies</button>
	</div>
	<div class="middle">
		<img id="daPuppies" src="images/puppies.jpg" width="300" />
	</div>
</center>
<script type="text/javascript">
 
// _ ___ _ _ ___ _____
// | |/ _ \| | | |_ _|__ /
// | | | | | | | || | / /
// |_| |_| | |_| || | / /_
// (_)\__\_\\___/|___/____|
// Week two notQuiz in JavaScript
// Please test your answers in Chrome dev console
 
 
// 1. make an array of 5 puppies by name
 
// 2. iterate through your puppies using a for loop // & print their names to the console
 
 
// 3. your puppies are in the wrong places!
// create a function that swaps two elements in an
// array then returns the array out again, then call
// it to rearrange puppies.
 
// 4. create an array of ages (type int) for all
// your puppies then define a function that returns // average puppy age
 
// 5. sort your array of puppy ages and puppy names, and print to the console
 
 
// 6. visit the url https://www.jasondavies.com/maps/ // open Chrome console
// using JavaScript in the console
// find out how many images are on the page
 
// 7. using JavaScript in the console
// find out what the width is of the 1st image
 
// 8. define a function that makes your puppy
// image grow continuously larger and another
// that shrinks it, then attach these to the
// buttons above
 
 
// 9. define a function that moves your puppy
// to the right then call that function when the
// "move puppy" button is pushed.
 
 
// 10. define a function that stops the puppy when
// the button "stop puppy" is pressed. Stop it before
// it gets away!
 
 
// 11. Don't forget to stretch, breath &
// get some sleep! ☺
</script>
</html>

以上是关于html puppies.html的主要内容,如果未能解决你的问题,请参考以下文章

一天学会HTML 基础

Html.Partial 与 Html.RenderPartial 和 Html.Action 与 Html.RenderAction

html Html模板/ Html Boilerplate |标签HTML

html里怎么引用一个html的头部

html5与传统html区别

html4和html5的区别