javascript做j简单的开关灯 就是两个按钮 按一下按钮整个页面都会变蓝 按另一个按钮 整个页面都胡变黑的

JavaScript06

javascript做j简单的开关灯 就是两个按钮 按一下按钮整个页面都会变蓝 按另一个按钮 整个页面都胡变黑的,第1张

1、function kai(){.....}这段 前后分别加入<script></script>

2、document.getElementById("aaa").value.bgColor="blue"改成：

document.getElementById("aaa").bgColor="blue"

3、javascript语法要求句末要用分号结束。

4、两个radio要联动的话，要有相同name值。

其实通过代码进行实现的，具体的代码格式如下：

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>js图片放大</title>

<script language="javascript" type="text/javascript">

var $=function(thisId){return document.getElementById(thisId)}

var $$=function(othisId,thoseTag){return othisId.getElementsByTagName(thoseTag)}

function addLoadEvent(func){

var oldonload = window.onload

if(typeof window.onload != 'function'){

window.onload = func

}

else{

window.onload = function(){oldonload()func()}

}

}

function preparePhoto(){

if(!$){ return false}

if(!$$){ return false}

var links = $$($("linkBox"),"a")

for(i=0i<links.lengthi++){

links[i].onclick = function(){

return showPic(this)

}

links[i].onmousemove = function(){

return showPic(this)

}

}

}

function showPic(url){

if(!$("photoHandler")){

//创建DIV容器

var photoHandler = document.createElement("div")

//设置ID

photoHandler.id="photoHandler"

//创建一个段落

var textBox=document.createElement("p")

//设置文本

var textContent=document.createTextNode("hello,here is come the text")

//把文本附加到段落

textBox.appendChild(textContent)

//设置段落的ID

textBox.id="textBox"

//创建一个图片容器

var imgBox=document.createElement("img")

//设置图片的ID

imgBox.id="imgBox"

//把图片容器附加到DIV容器

photoHandler.appendChild(imgBox)

//把Div附加到文档中

$("container").appendChild(photoHandler)

//把创建的那个段落插到文档中

$("container").insertBefore(textBox,$("linkBox"))

//总的思路就是先创建好树，再appendChild/insertBefore文档中

}

var scoure = url.getAttribute("href")

var decripPhoto =url.getAttribute("title")

$("imgBox").setAttribute("src",scoure)

$("textBox").firstChild.nodeValue = decripPhoto

return false

}

addLoadEvent(preparePhoto)

</script>

<style>

* {

margin:0

padding:0

}

#container{ text-align:centermargin:0 auto}

h1 {

background:#666666

border-bottom:#333333 solid 5px

height:50px

color:#99CC00

line-height:50px

padding-left:60px

text-align:left

margin-bottom:5px

}

ul {

list-style:none

border:none

}

li {

display:inline

margin-right:10px

}

a{ text-decoration:none}

a img {text-decoration:noneborder:2px  #00CCFF solid}

a:hover img{ border: #CCFF33 2px solid}

#photoHandler{ border-top:#333333 solid 5pxbackground:#999999padding:5px}

#imgBox{ border:#333333 solid 5pxbackground:#CCCCCC}

#textBox{ position:fixedtop:220pxright:30pxborder:1px #FFFF00 dashedline-height:20pxcolor:#CCFF00}

</style>

</head>

<body>

<div id="container">

<h1>请等待图片加载完成，否则看不到预想效果</h1>

<ul id="linkBox">

<li><a href="/jscss/demoimg/wall1.jpg"><img src="/jscss/demoimg/wall_s1.jpg" /></a></li>

<li><a href="/jscss/demoimg/wall2.jpg"><img src="/jscss/demoimg/wall_s2.jpg" /></a></li>

</ul>

</div>

</body>

</html>

不懂的可以继续提问偶 看名称即可