Web基础之Javascript

来源：互联网发布：皮衣品牌知乎编辑：程序博客网时间：2024/05/22 22:19

Web基础之JavaScript

类型转换与函数调用：

var num1 =window.prompt("Please input num1:");

var num2 =window.prompt("Please input num2:");

var ope =window.prompt("Please input op:");

num1 =parseFloat(num1);

num2 =parseFloat(num2);

document.write("res= "+op(num1,num2,ope)); // 函数名和变量名不能重复

function op(num1,num2,ope)

{

var res = 0;

switch(ope){

case '+':res =num1+num2;

break;

case '-':res =num1-num2;

break;

case '*':res =num1*num2;

break;

case '/':res =num1/num2;

break;

}

return res;

}

JavaScript数组：

var arr1 = new Array();

arr1.push(1);

arr1.push(2);

arr1.push(3);

arr1.push(4);

for (var i=0; i < arr1.length; i++){

document.write(arr1[i]);

}

document.write("<br>");

arr1.reverse();

for (var i=0; i < arr1.length; i++){

document.write(arr1[i]);

}

String split 和数组的用法：

var info = "hello!world!my!baby!";

varresult=info.split("!",3); //3表示取其中前3个；

for (vari=0; i < result.length; i++){

document.write(result[i]+"<br>");

}

二分法查找：

var aa = [2,3,4,8,9,10,12];

binasort(aa,10,0,6);

//写递归程序在程序终止的地方一定要加return；

function binasort(arr,val,start,fini){

if (start >fini){

document.write("找不到")

return;

}

var mid =Math.floor((start+fini)/2);

if (val >arr[mid]){

start =mid+1;

binasort(arr,val,start,fini);

}else if (val< arr[mid]){

fini = mid- 1;

binasort(arr,val,start,fini);

}else{

document.write("找到，下标为："+mid);

return;

}

通过按键控制img控件移动：(面向对象的方式实现)

<linkrel="stylesheet" type="text/css"href="css/mario.css">

<scripttype="text/javascript" src ="js/mario.js"></script>

<body>

</table>

<divclass="gamediv">

<imgid="mymario" src="image/1.jpg"style="position:absolute;width:70px;left:0px;top:0px;"/>

</div>

</body>

mario.js:

function Mario(){

this.x = 0;

this.y = 0;

this.move =function(direct){

moveupto(direct);

}

function moveupto(dir){

var mymario =document.getElementById('mymario');

var left =mymario.style.left;

var leftnum =parseInt(left.substr(0,left.length-2));

var top =mymario.style.top;

var topnum =parseInt(top.substr(0,left.length-2));

switch (dir){

case 0:topnum-= 10;break;

case 1:leftnum+= 10;break;

case 2:topnum+= 10;break;

case 3:leftnum-= 10;break;

}

if (topnum< 0){

window.alert("TopBorder!");

}

if (leftnum< 0){

window.alert("LeftBorder!");

}

if (topnum>= 0 && leftnum >=0){

mymario.style.left= leftnum + "px";

mymario.style.top= topnum + "px";

}

var mario = new Mario();

function marioMove(dir){

mario.move(dir);

}

JavaScript 面向对象：

var cat1 = new Cat();

cat1.name = "white";

cat1.age = 12;

cat1.color = "black";

window.alert(cat1.constructor);

window.alert(typeof cat1);

if (cat1 instanceof Cat){

window.alert("Yes");

Javascript面向对象继承：

//主人

functionMaster(){

this.feed= function (animal,food){

window.alert("Masterfeed "+animal.name+food.name);

}

//食物

functionFood(name){

this.name= name;

}

functionFish(name){

this.food= Food;

this.food(name);

}

functionBone(name){

this.food= Food;

this.food(name);

}

//动物

functionAnimal(name){

this.name= name;

}

functionCat(name){

this.animal= Animal;

this.animal(name);

}

functionDog(name){

this.animal= Animal;

this.animal(name);

}

var cat =new Cat("小猫咪");

var dog =new Dog("小白");

var bone =new Bone("骨头");

var fish =new Fish("小鱼");

var master= new Master();

master.feed(dog,fish);

</script>

Javascript 事件：

function test1(){

window.alert("hello,event");

}

function test2(e){

window.alert("x:"+e.clientX+"y:"+e.clientY);

}

function test3(){

window.alert(newDate().toLocaleString());

}

/*直接访问style*/

function change(event){

if(event.value == "Black"){

vardiv1 = document.getElementById("div1");

vardiv1.style.backgroundColor= "black"; //要把background-color改为backgroundColor , 在Html dom style里可以找到

}elseif (event.value == "Red"){

vardiv1 = document.getElementById("div1");

vardiv1.style.backgroundColor= "red";

}

/*访问外部css*/
function change2(e){
var cssRules = document.styleSheets[0].rules; //获取第一个css文件属性，styleSheets是所有css文件集合；
var style1 = cssRules[0];// 获取第一个文件中的第一个类
if (e.value == "black"){
style1.style.backgroundColor = "black";
}else if (e.value == "red"){
style1.style.backgroundColor = "red";
}
}

</script>

</head>

<body>

<inputtype="button" onclick="test3()" value="显示当前时间"/>

<divid="div1" style="width:400px; height:200px;background-color:red;"></div>

<inputtype="button" onclick="change(this)"value="Black"/>

<inputtype="button" onclick="change(this)"value="Red"/>

</body>

Web基础之Javascript