图片切换:
<!doctype>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#content{
width: 400px;
height:400px;
border:10px solid #0CC;
margin:40px auto 0;
position:relative;
}
#content a{
width:40px;
height:40px;
background:#000;
border:5px solid #fff;
position:absolute;
top:175px;
text-align:center;
text-decoration:none;
line-height:40px;
color:#fff;
font-size:30px;
font-weight:bold;
}
#prev{
left:10px;
}
#next{
right:10px;
}
#text{
position:absolute;
margin:0;
bottom:0;
left:0;
width:400px;
height:30px;
line-height:30px;
text-align:center;
color:#FFF;
background:#000;
}
#span1{
position:absolute;
margin:0;
top:0;
left:0;
width:400px;
height:30px;
line-height:30px;
text-align:center;
color:#FFF;
background:#000;
}
#img1{
width:400px;
height:400px;
}
</style>
</head>
<body>
<div id="content">
<a id="prev" href="javascript:;" onClick="prevOnclik()"><</a>
<a id="next" href="javascript:;" onClick="nextOnclik()">></a>
<p id="text">图片文字加载中</p>
<span id="span1">数量正在计算中</span>
<img id="img1" src="img\1.jpg"/>
</div>
</body>
<script type="text/javascript">
var prevBtn=document.getElementById("prev");
var nextBtn=document.getElementById("next");
var text1=document.getElementById("text");
var span1=document.getElementById("span1");
var img1=document.getElementById("img1");
//初始化数据
var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
var textArr=["Num1","Num2","Num3","Num3"];
var num=0;
window.οnlοad=function(){
//执行初始化
img1.src=imgArr[num];
span1.innerHTML=num+1+"/"+imgArr.length;
text1.innerHTML=textArr[num];
}
prevBtn.οnclick=function prevOnclik(){
num--;
if(num<0||num==0){
num=0;
}
resetData(num);
}
function nextOnclik(){
num++;
if(num>3||num==3){
//所谓的循环,还是顺序查看,主要就是在这里给num重新设置数值的问题
// 循环:num=0;
//顺序和循环两个按钮就可以看作两个布尔数值,然后判断false或true的问题;
num=3;
}
resetData(num);
}
//重设函数
function resetData(getNum){
img1.src=imgArr[getNum];
span1.innerHTML=getNum+1+"/"+imgArr.length;
text1.innerHTML=textArr[getNum];
}
</script>
</html>
修改背景,利用js弹出层:
<!doctype>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#Odiv{
width:50px;
height:50px;
background-color:#03F;
position:absolute;
top:100px;
left:60px;
}
</style>
</head>
<body>
<h3>请为下面的蓝色DIV设置样式:</h3>
<input type="button" id="Obutton" value="点击设置" style="background-color:#F33" onClick="abc()"/>
<div id="Odiv"></div>
</body>
<script>
function abc(){
//得到元素
var Odvi=document.getElementById("Odiv");
//弹出层参数:
var bordercolor = "#666699"; // 提示窗口的边框颜色
var bgcolor = "#FFFFFF"; // 提示内容的背景色
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
//创建背景层:
var bgobj =document.createElement("div");
//弹出层
//背景设置:
bgobj.style.cssText= "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgobj);
//弹出层上的Div设置:
var msgObj=document.createElement("div");
msgObj.style.cssText =
"position:absolute;font:11px '宋体';top:"+(iHeight-200)/2+"px;left:"+(iWidth-600)/2+"px;width:"+600+"px;height:"+150+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(msgObj);
//内容设置:
var selectBgColorBtn=document.createElement("input");
msgObj.appendChild(selectBgColorBtn);
selectBgColorBtn.type="button";
selectBgColorBtn.value="请选择颜色:";
selectBgColorBtn.style.position="absolute";
selectBgColorBtn.style.left="100px";
var redBtn=document.createElement("button");
msgObj.appendChild(redBtn);
redBtn.style.backgroundColor="red";
redBtn.style.width="20px";
redBtn.style.height="20px";
redBtn.οnclick=function redClick(){
var Odvi=document.getElementById("Odiv");
alert("<><");
Odvi.style.backgroundColor="yellow";
}
}
</script>
</html>