【php基础班】第13天 this、星星案例、图片切换、总结

来源：互联网发布：深圳淘宝摄影编辑：程序博客网时间：2024/06/05 10:27
第一节this对象this:事件源，对象本身给对象绑定事件:格式：对象.onclick=函数名;注意：函数名后面不加括号在绑定事件中，this是可以直接用的.this.parentNode就是获得this的父节点删除标签注意:当想要删除标签的时候，必须找到这个对象的上级标签（父节点）第二节 星星案例(一)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>网页标题</title><meta name="keywords" content="关键字列表" /><meta name="description" content="网页描述" /><link rel="stylesheet" type="text/css" href="" /><style type="text/css">#span1{border:1px solid red;width:100px;display:inline-block;height:20px;overflow:hidden;}#span2{display:inline-block;width:0px;height:20px;}</style><script type="text/javascript">var count=0;//代表星星的个数var dingshiqi;//定时器名字var shijian=0;//时间var gametime;//记录游戏时间定时器//设置body的颜色window.onload=init;function init(){//document.body.bgColor="black";}//var dingshiqi=window.setInterval("star()",500);//创建星星的函数function star(){//创建星星var obj=document.createElement("img");obj.src="images/xingxing.gif";//设置星星的宽度var w=Math.floor(Math.random()*(90-30+1))+30;obj.width=w;//设置随即位置//var x=e.clientX;//鼠标的x坐标//var y=e.clientY;//鼠标的y坐标var x=Math.floor(Math.random()*1300)+30;var y=Math.floor(Math.random()*500)+30;obj.style.position="absolute";obj.style.top=y+"px";obj.style.left=x+"px";//把obj加到body中document.body.appendChild(obj);//给对象绑定事件obj.onclick=removestar;//记录星星个数count++;//调用函数告诉玩家有多少个星星countxingxing();//改变进度条document.getElementById("span2").style.width=count*5+"px";document.getElementById("span2").style.backgroundColor="red";}//删除星星的函数function removestar(){this.parentNode.removeChild(this);count--;countxingxing();}//点击开始游戏的函数function startxingxing(){dingshiqi=window.setInterval("star()",500);gametime=window.setInterval("youxishijian()",1000);}//暂停游戏function zanting(){alert("暂停游戏");}//星星个数function countxingxing(){var shu=document.getElementById("count");if(count>20){alert("游戏结束");window.clearInterval(dingshiqi);window.clearInterval(gametime);}shu.innerHTML=count+"个星星";}//记录游戏时间function youxishijian(){var obj=document.getElementById("jishi");shijian++;obj.innerHTML="游戏进行"+shijian+"秒";}</script></head><body><span id="count">0个星星</span><input type="button" value="点击开始游戏" onclick="startxingxing()"><input type="button" value="点击暂停游戏" onclick="zanting()"><span id="jishi">游戏进行0秒</span><span id="span1"><span id="span2"></span></span></body></html> 第三节 星星案例(二)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>网页标题</title><meta name="keywords" content="关键字列表" /><meta name="description" content="网页描述" /><link rel="stylesheet" type="text/css" href="" /><style type="text/css">#span1{border:1px solid red;width:100px;display:inline-block;height:20px;overflow:hidden;}#span2{display:inline-block;width:0px;height:20px;}</style><script type="text/javascript">var count=0;//代表星星的个数var dingshiqi;//定时器名字var shijian=0;//时间var gametime;//记录游戏时间定时器//设置body的颜色window.onload=init;function init(){//document.body.bgColor="black";}//var dingshiqi=window.setInterval("star()",500);//创建星星的函数function star(){//创建星星var obj=document.createElement("img");obj.src="images/xingxing.gif";//设置星星的宽度var w=Math.floor(Math.random()*(90-30+1))+30;obj.width=w;//设置随即位置//var x=e.clientX;//鼠标的x坐标//var y=e.clientY;//鼠标的y坐标var x=Math.floor(Math.random()*1300)+30;var y=Math.floor(Math.random()*500)+30;obj.style.position="absolute";obj.style.top=y+"px";obj.style.left=x+"px";//把obj加到body中document.body.appendChild(obj);//给对象绑定事件obj.onclick=removestar;//记录星星个数count++;//调用函数告诉玩家有多少个星星countxingxing();//改变进度条document.getElementById("span2").style.width=count*5+"px";document.getElementById("span2").style.backgroundColor="red";}//删除星星的函数function removestar(){this.parentNode.removeChild(this);count--;countxingxing();}//点击开始游戏的函数function startxingxing(){dingshiqi=window.setInterval("star()",500);gametime=window.setInterval("youxishijian()",1000);}//暂停游戏function zanting(){alert("暂停游戏");}//星星个数function countxingxing(){var shu=document.getElementById("count");if(count>20){alert("游戏结束");window.clearInterval(dingshiqi);window.clearInterval(gametime);}shu.innerHTML=count+"个星星";}//记录游戏时间function youxishijian(){var obj=document.getElementById("jishi");shijian++;obj.innerHTML="游戏进行"+shijian+"秒";}</script></head><body><span id="count">0个星星</span><input type="button" value="点击开始游戏" onclick="startxingxing()"><input type="button" value="点击暂停游戏" onclick="zanting()"><span id="jishi">游戏进行0秒</span><span id="span1"><span id="span2"></span></span></body></html>第四节 图片切换Alert(“内容信息”);//弹出框Prompt(“”);//让用户输入内容,可以有个默认值Prompt(“用户输入信息”,”默认值”);var food=window.prompt("你吃了什么");alert(food);var num=prompt((“你的考试成绩是多少”，100);if(num>=90){document.write(“优秀”);}else if(num>=80){Document.write(“良好”);}comfirm();//获得一个boolean值<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>网页标题</title><meta name="keywords" content="关键字列表" /><meta name="description" content="网页描述" /><link rel="stylesheet" type="text/css" href="" /><style type="text/css">div{width:600px;border:1px solid red;overflow:hidden;}#img1{float:left;}#ul1{float:right;margin:0px;padding:0px;margin:0px 30px 0 0;}#ul1 li{list-style:none;border:1px solid gray;padding:0px;width:30px;height:20px;margin:6px;line-height:20px;text-align:center;}</style><script type="text/javascript">var n=1;//图片标记数var dingshiqi;//让图片动的定时器window.onload=init;function init(){dingshiqi=window.setInterval("tupian()",1000);beijing=document.getElementById("li1");beijing.style.backgroundColor="orange";}//换图片函数function tupian(){var obj=document.getElementById("img1");n++;if(n>=7){n=1;}obj.src="images/dd_scroll_"+n+".jpg";for(var i=1;i<=6;i++){var li1=document.getElementById("li"+i);li1.style.backgroundColor="";}beijing=document.getElementById("li"+n);beijing.style.backgroundColor="orange";}//鼠标放上停止图片的函数function stoptupian(){window.clearInterval(dingshiqi);}//鼠标离开图片继续动的函数function dongtupian(){dingshiqi=window.setInterval("tupian()",1000);}//鼠标放到li上停止图片查看指定的图片function tingtupian(i,lin){//获得id为img1这个标签var obj=document.getElementById("img1");//改变对象的src属性换图片n=i;obj.src="images/dd_scroll_"+n+".jpg";//清除定时器window.clearInterval(dingshiqi);huanbeijing(lin);}//让定时器继续换图片function jixu(){dingshiqi=window.setInterval("tupian()",1000);}function huanbeijing(lin){for(var m=1;m<=6;m++){var li1=document.getElementById("li"+m);li1.style.backgroundColor="";}lin.style.backgroundColor="orange";}</script></head><body><div><img id="img1" src="images/dd_scroll_1.jpg" onmouseout="dongtupian()" onmouseover="stoptupian()"><ul id="ul1"><li id="li1" onmouseover="tingtupian(1,this)" onmouseout="jixu()">1</li><li id="li2" onmouseover="tingtupian(2,this)" onmouseout="jixu()">2</li><li id="li3" onmouseover="tingtupian(3,this)" onmouseout="jixu()">3</li><li id="li4" onmouseover="tingtupian(4,this)" onmouseout="jixu()">4</li><li id="li5" onmouseover="tingtupian(5,this)" onmouseout="jixu()">5</li><li id="li6" onmouseover="tingtupian(6,this)" onmouseout="jixu()">6</li></ul></div></body></html>第五节 总结day1：变量，数据类型，运算符1）变量，变量名不能以系统内部关键字，不能以数字开头，只能包括数字字母下划线2）Number，string，boolean，null，undefined，复合数据类型3）运算符a)赋值运算符“=“b)算数运算符“+，-，*，/，%，++,--“c)逻辑运算符”&&,||,!”;d)比较运算符“>,<,==,!=,>=,<=,===,!==“e)位运算符”&，<<”Day2：语句，循环1）if(条件判断){//语句块}2）if,else:必定有一个执行3）if,else if,else if,多选一4）if,else if,else if,else必定有一个执行5）switch,case,break,default6）变量初始化while（条件）{循环体,变量改变}7）变量初始化Do{//循环体，变量改变},while(条件)8）For(循环变量初始化，循环条件判断，循环变量的改变){//循环体}Day3:函数function，数组arr1)function的定义格式function 函数名(形式参数1，形式参数2……){//函数体,return}2)function的调用格式1,var 变量名=函数名(实际参数1，实际参数2……);2,函数名();3)return如果没有返回值，就结束函数，如果有返回值就把值返回给调用函数的位置4)函数名(),不能和系统关键字相同，让函数名有意义5)可以再函数定义之前调用，函数也可以出现任意位置6)函数有局部变量和全局变量的区别，考虑局部变量7)Arr=[很多的数据],new Array();8)取值和赋值的时候，有对应的下标，通过对应的下标取值或者赋值Day4：二维数组，对象1)二维数组，arr=[[],[],[]],多个数组放到一起2)arr[i][j],通过两个下标，取值和赋值3)求和思想，定义一个变量，把找到的没个数据放到变量里面,累计求和4)计数思想，定义一个变量，如果有满足条件的数据，就++5)交换思想：var temp;temp=arr[i],arr[i]=arr[j],arr[j]=temp;找个变量保存值，把变量依次赋值6)Date对象a)四种创建方法，i.Var d1=new Date();ii.Var d2=new Date(“2015/11/18 17;12:36”);iii.Var d3=new Date(2015,11,18,17,12,39);//月份是从0到11的数字保存的iv.Var d4=new Date(好大的个值);这个是值是从1970年1月1日开始记录的毫秒值b） 取得对应值的方法getTime取得毫秒之1）getFullYear获得年份2）getMonth获得月份C）设置对应的值的方法1）setFullYear设置年份2）setMonth设置月份7）arr对象1）concat连接数组2）join连接每项返回字符串3）reverse翻转数组项8）string对象1）indexof获得制定字符的第一个位置2）lastindexOf获得最有一次出现的位置3）substr截取字符串，从前一个值取后一个值个4）substring截取字符串，可以去到前面的值，但是不会取到后面的值5）split分割字符串返回数组9）Math对象1）Math.pow（n，m）取得n的m次方2）Math.random()取得随机数，能获得0但是不能获得1求任意两位数的随机数：Math.floor(Math.randon()*(大数-小数+1))+小数;3)Math.floor向下取整4)Math,ceil()向上取整5）Math.round(n)四舍五入Day5:对象，事件，定时器1)对象，JS具体到某个标签，以JS来看所有标签都是对象2)获得对象：var obj=document.getElementById(“id名”);3)获得对象：Var obj=document.getElementsByTagName(“标签名”);4)获得body：document.body5)createElement，创建标签6)removeChild，删除节点（标签），删除节点的时候必须找到上级7)appendChild，追加节点，找到要往哪个标签中添加8)事件i.鼠标事件1.onmouseover鼠标放上2.onmouseout鼠标离开3.onclick点击4.ondbclick双击5.onmousedown鼠标按下6.onmouseup鼠标抬起7.onmousemove鼠标移动ii.键盘事件1.onkeypress按键一次2.onkeydown键盘按下3.onleyup键盘抬起iii.表单事件1.onsubmit提交事件2.onreset重置3.onblur失去焦点4.onfocus得到焦点5.onchange当改变的时候触发的事件（select）iv.窗口事件：页面加载完成之后调用的事件1.window.onload=init;2.<body onload=”init()”></body>v.Event1.event.target事件源2.event.clientX;鼠标的x坐标3.event.clientY;鼠标的y坐标vi.this事件源，代表事件本身的对象4）定时器：a)反复性定时器：var定时器名=window.setInterval(“函数或者代码“，时间)b)一次性定时器：var定时器名=window.setTimeout(“函数或者代码”，时间);5）清除定时器：a)Window.clearInterval(定时器名);b)Window.clearTimeout(定时器名);Day6：alert，prompt，confirm1）alert弹出框，有警告作用2）prompt(“用户输入内容“,”默认值”)3）confirm(“选择行的问题”);//true,false4）innerHTML:获得对应对象中的所有的HTML内容5）JS和CSS属性改变的写法a)CSS=>Margin(JS=>margin)b)CSS=>border-color(JS=>borderColor)
阅读全文
0 0