js期末总结

实例一：简易计算器:把input里面的数据记得转型为数值型.eg:var firstValue=parseFloat(document.form1.frist.value)

实例二：打印出菱形：用循环分别打印出空格和*

for(i=1;i<=4;i++){for(j=1;j<=4-i;j++){document.write(" ")}for(k=1;k<=2*i-1;k++){*}<br/>}

实例三：状态栏显示消息：window.status="奥特猫正在玩切西瓜"  屏幕的宽度与高度：window.screen.width
window.screen.height打开一个新窗口window.open("1.html"),如果打开的新窗口有特点的特征，则需open("1.html","标题名称","menubar=0,toolbar=0,status=0,width=200,height=200")提示信息confirm("确认退出")：返回true或者falseclose()关闭窗口打开模式窗口：showModalDialog("1.html",window,""),注：当要将模式窗口的值返回给前一窗口时，需用到dialogArguments.documnet.getElementById("需得到模式窗口值的上一个窗口的id").value

,这时需要获取复选框中的值？【复选框checkbox的name一样，根据name获取节点（这是一个数组），遍历这个数组，if(nameNode[i].checked)，则station=station+nameNode[i].value（var station=""）新窗口是全屏打开open("1.html","标题","fullscreen=1")

实例四：动态显示时间，时间格式为：2013年12月18日，星期三，21时31分38秒PM

var nowTime=new Date() var year=nowTime.getYear()  var month=nowTime.getMonth()+1 var date=nowTime.getDate() var day=nowTime.getDay()(var
dayIndex=day%7 var week=["星期天","星期一","星期二","星期三","星期四","星期五","星期六" ] var trueDay=week[dayIndex]) var hours=nowTime.getHours()
var minutes=nowTime.getMinutes() var seconds=nowTime.getSeconds() var str="AM" if(hours>12) str="PM"hours=hours%12，时间显示

timeNode.innerHTML=year+"年"+month+"月"+date+"日,"+trueDay+","+hours+"时"+minutes+"分"+seconds+"秒"+str

动态显示：setTimeout("showTime()",1000)

实例五：前进，后退。列表菜单

a href img src

<a href="javascript:history.back()">后退</a> <a href="javascript:history.forward()">前进</a>

<select><option>
eg:<select name="select" onchange="javascript:location.href=this.value"> 

<option value="summer.html">夏</option>

或者：

<select name="selectname" onchange="selectSea()">

<option value="spring.html">春</option>

<script language="javascript">

function selectSea(){

var selectNode=document.getElementById("sid")

var selectIndex=selectNode.selectedIndex

var selectValue=selectNode.options[selectIndex].value;//获取选择的option选项
location.href=selectValue

}

实例六：改变a aNode.innerHTML="新浪" aNode.href="http://www.sina.com"

实例七：图片随鼠标滑动【须去掉html标签前面的代码】

<script language="javascript">

function move(){

var advNode=document.getElementById("Layer1")

advNode.style.pixelTop=12+document.body.scrollTop

}

onscroll=move

图片随鼠标滑动二（带有关闭按钮）

<script language="javascript">
var initTop=0;
var closeTop=0;
function init(){
//pixelTop是和顶部距离,pixelRight是和右边距离
initTop=document.getElementById("Layer1").style.pixelTop;
closeTop=document.getElementById("Layer2").style.pixelTop;
}
function move(){
var advNode=document.getElementById("Layer1")
var closeNode=document.getElementById("Layer2")

advNode.style.pixelTop=initTop+document.body.scrollTop
closeNode.style.pixelTop=closeTop+document.body.scrollTop
}
onload=init;
onscroll=move
</script>

实例八：图片飘动

<script language="javascript">
var currentX=0
var currentY=0
var step=5
var flagX=true
var flagY=true
function floatAdv(){
document.getElementById("Layer1").style.left=currentX+"px"
document.getElementById("Layer1").style.top=currentY+"px"
var width=document.body.offsetWidth-document.getElementById("Layer1").offsetWidth//offsetWidth是属性不是样式,而且还是document.body对象的样式
var height=document.body.offsetHeight-document.getElementById("Layer1").offsetHeight
if(currentX<0){
flagX=true
currentX+=step
}
if(currentX>width){
flagX=false
currentX-=step
}
if(flagX==true)//等于true
currentX+=step
else
currentX-=step

if(currentY<0){
flagY=true
currentY+=step
}
if(currentY>height){
flagY=false
currentY-=step
}
if(flagY==true)
currentY+=step
else
currentY-=step
setTimeout("floatAdv()",10)

}
onload=floatAdv
</script>