JS入门到精通 第16章 图像处理
导读：一、练习 1. 练习1 （1）源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用预装载图像制作幻灯</tit...
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用预装载图像制作幻灯</title>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded',function(){
var begin=setInterval('showpic()',1000);
});
var j=0;
var test=new Array(15);
for(var i=0;i<=14;i++){
test[i]=i;
}
var test2=[];
for(var i=0;i<test.length;i++){
test2[i]=new Image();
test2[i].src=test[i]+'.gif';
alert(test2[i].src);
}
function showpic(){
if(j==14)
j=0;
else
++j;
var imagestr=test2[j].src.split("/");
var imagesrc=imagestr[imagestr.length-1];
str="<img src='image/"+imagesrc+"'/>";
div1.innerHTML=str;
}
</script>
</head>
<body onLoad="var begin=setInterval('showpic()',1000);">
<div id='div1'></div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/16_1/
（3）Tips
有点绕，写的很潦草。
++j和j++一样的效果。
取分割后数组的最后一个元素。
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按时间随机变化的网页背景</title>
<style type="text/css">
<!--
.style2 {
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
text-align: center;
}
.style5 {color: #FFFFFF;font-size: 14px;}
table{
width: 265px;
height: 110px;
margin: 5px auto;
border-collapse: collapse;
}
td{
border:1px solid #0000FF;
}
-->
</style>
</head>
<body onLoad="randompic();">
<div>修改密码</div>
<table>
<tr>
<td><span>用户名：</span></td>
<td><input name="textfield" type="text"></td>
</tr>
<tr>
<td><span>密 码：</span></td>
<td><input name="textfield2" type="text"></td>
</tr>
<tr>
<td><span>确认密码：</span></td>
<td><input name="textfield3" type="text"></td>
</tr>
<tr>
<td colspan="2"><div style="text-align: center">
<input name="Submit2" type="button" value="保存">
<input name="Button" type="button" value="取消">
</div></td>
</tr>
</table>
<p>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded',function(){
randompic();
});
function randompic(){
var i = Math.floor(Math.random()*5);
var src = "";
switch(i){
case 0 :
src = "0.jpg";
break;
case 1:
src = "1.jpg";
break;
case 2:
src = "2.jpg";
break;
case 3:
src = "3.jpg";
break;
case 4:
src = "4.jpg";
break;
}
document.body.background=src;
setTimeout("randompic()",3000);
}
</script>
</p>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/16_2/
（3）Tips
document.body.background。
setTimeout。
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无间断的图片循环滚动效果</title>
<style>
#box{
width: 750px;
margin: 0 auto;
overflow: hidden;
border: 3px solid #0000FF;
}
#inner{
width: 800%;
}
#div1{
float: left;
border: 1px solid #0000FF;
}
#div2{
float: left;
width: 1325px;
border: 3px solid #00FF00;
}
img{
width: 110px;
height: 89px;
float: left;
}
</style>
</head>
<body>
<div id="box">
<div id="inner">
<div id="div1">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
<img src="7.jpg">
<img src="8.jpg">
<img src="9.jpg">
<img src="10.jpg">
<img src="11.jpg">
<img src="12.jpg">
</div>
<div id="div2"></div>
</div>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var n=15; //数值越小图片滚动的越快
div2.innerHTML=div1.innerHTML;
alert(div2.offsetWidth);
alert(box.scrollLeft);
alert(div1.offsetWidth);
var Mycheck;
function move(){
if(div2.offsetWidth-box.scrollLeft<=0)
box.scrollLeft=0;
//box.scrollLeft-=div1.offsetWidth;
else
box.scrollLeft++;
Mycheck=setTimeout(move,n);
}
box.onmouseover=function(){clearTimeout(Mycheck);}
box.onmouseout=function(){Mycheck=setTimeout(move,n);}
move();
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/16_3/
（3）Tips
难以理解，两个为啥大小不一样，过渡的时候怎样的。
box.onmouseover，clearTimeout()。
width=800%。
4. 练习4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<link href="CSS/style.css" rel="stylesheet">-->
<title>随机生成登录图片验证码</title>
<style>
td {
font-size: 9pt; color: #000000;
}
img{
border:0;
}
.blue {
font-size: 9pt; color: #034683; font-family:"Times New Roman"
}
.btn_grey {
font-family: "宋体"; font-size: 9pt;color: #333333;
background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
input{
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
body {
margin: 0px;
/*background-image:url(../images/bg.gif)*/
}
</style>
</head>
<body>
<table width="350" height="224" border="0" cellpadding="0" cellspacing="0" background="Images/login.jpg">
<tr>
<td height="84"> </td>
</tr>
<tr>
<td height="45" valign="top"><table width="62%" height="114" border="0" cellpadding="0" cellspacing="0">
<form name="form1" method="post" action="#">
<tr>
<td height="30" colspan="4"> <span>用户名</span>：
<input name="manager" type="text" id="manager" size="20"></td>
</tr>
<tr>
<td height="27" colspan="4"><span>密 码：</span> <input name="PWD" type="password" id="PWD" size="22"></td>
</tr>
<tr>
<td width="35%" height="27"><span>验证码</span>： </td>
<td width="14%"><input name="checkcode" type="text" id="checkcode" size="5"></td>
<td width="48%" ><div id='div1'></div></td>
<td width="3%" > </td>
</tr>
<tr>
<td colspan="4"><input name="Submit" type="submit" value="确认">
<input name="Submit2" type="reset" value="重置">
</td>
</tr></form>
</table></td>
</tr>
</table>
<script type="text/javascript">
var str="";
var img="";
var strsource=['明','天','日','科','技','会','更','好','创','新'];
for(var i=1;i<=4;i++){
var n=Math.floor(Math.random()*strsource.length);
str=str+strsource[n]; //验证的，这里没用到
img=img+"<img src='Images/checkcode/"+n+".gif' width='19' height='20'> ";
div1.innerHTML=img;
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/16_4/
（3）Tips
好像又挺简单。
5. 练习5
（1）源代码
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>浮动广告</title>
<script type="text/javascript">
var layers;
function floaters() {
this.items= [];
this.addItem= function(id,x,y,content){
document.write('<div id='+id+' style="z-index: 10; position: absolute; width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</div>');
var newItem= {};
newItem.object= document.getElementById(id);
if(y>10) {y=10}
newItem.x= x;
newItem.y= y;
this.items[this.items.length]= newItem;
}
this.play= function(){
layers= this.items;
setInterval('play()',10);
}
}
var delta=0.15;
//alert(layers.length);
function play(){
//alert(layers.length);
i=0;
var obj= layers[i].object;
var obj_x= (typeof(layers[i].x)=='string'?eval(layers[i].x):layers[i].x);
var obj_y= (typeof(layers[i].y)=='string'?eval(layers[i].y):layers[i].y);
//alert("obj_x:"+obj_x+"，obj_y:"+obj_y+"，offsetLeft:"+obj.offsetLeft+"，scrollLeft:"+document.body.scrollLeft)
if(obj.offsetLeft!=(document.body.scrollLeft+obj_x)) {
var dx=(document.body.scrollLeft+obj_x-obj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
obj.style.left=obj.offsetLeft+dx;
}
if(obj.offsetTop!=(document.body.scrollTop+obj_y)) {
var dy=(document.body.scrollTop+obj_y-obj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
obj.style.top=obj.offsetTop+dy;
}
obj.style.display= '';
}
var strfloat = new floaters();
strfloat.addItem("followDiv",6,80,"<img src='ad.jpg' border='0'>");
strfloat.play();
</script>
</head>
<body style="width: 1000px;height: 1000px;">
<p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p>
<p>加点东西再看</p><p>加点东西再看</p>
<p>加点东西再看</p>
<p>加点东西再看</p>
<p>加点东西再看</p><p>加点东西再看</p>
<p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p>
<p>加点东西再看</p><p>加点东西再看</p>
<p>加点东西再看</p>
<p>加点东西再看</p>
<p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p>
<p>加点东西再看</p><p>加点东西再看</p>
<p>加点东西再看</p>
<p>加点东西再看</p>
<p>加点东西再看</p><p>加点东西再看</p>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/16_5/
（3）Tips
麻求烦谁那么算，浪费时间。
obj.offsetLeft，如果父元素没设定直接找body。
obj.style.display=''是显示，按默认显示。
6. 练习6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片渐变效果</title>
</head>
<body>
<img src="1.jpg" id="myImage" style="border:1px solid #000000;opacity:0">
<script type="text/javascript">
var b = 1;
var c = true;
function latent()
{
if(c == true)
b++;
else
b--;
if(b==100)
{
b--;
c = false
}
if(b==10)
{
b++;
c = true;
}
myImage.style.opacity=b/100;
setTimeout("latent()",25);
}
latent();
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/16_6/
（3）Tips
myImage.style.opacity=b/100;
c=true;c=false，控制b是加还是减。
latent，潜在的，隐性的。
7. 练习7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条的显示</title>
<link href="CSS/progress.css" rel="stylesheet" type="text/css">
<style>
#test{
width:200px;
border:1px solid #000;
background:#fff;
color:#000;
}
#progress{
display:block;
width:0px;
background:#ccc;
}
</style>
<script type="text/javascript">
function progressTest(n){
var prog=document.getElementById('progress');
prog.firstChild.nodeValue=n+"%";
prog.style.width=(n*2)+"px";
n+=10;
if(n>100){
n=0;
}
setTimeout('progressTest('+n+')',1000);
}
</script>
</head>
<body>
<p id="test"><span id="progress">10%</span></p>
<script type="text/javascript">
progressTest(10);
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/16_7/
（3）Tips
pro.firstChild.nodeValue，表示第一个子节点，也就是span里的文本节点里的值，就是文字本身。
progressTest 函数内部没有 return 语句，它执行完后会返回 undefined。必须用字符串拼接。
10. 练习10
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片总置于顶端</title>
</head>
<body>
<div id="Tdiv" style="position: absolute; left: 0; top: 0; z-index: 25">
<img id="image1" src="mrsoft.jpg" width="52" height="249">
</div>
<div style="text-align: center;">
<img src="gougo.jpg">
</div>
<script type="text/javascript">
var ImgW=image1.width;
function permute(tfloor,Top,left){
var RealTop=document.body.scrollTop || document.documentElement.scrollTop;
buyTop=Top+RealTop;
document.getElementById(tfloor).style.top=buyTop+"px";
var RealLeft=document.body.scrollLeft || document.documentElement.scrollLeft;
var bWidth=document.documentElement.clientWidth;
var buyLeft=RealLeft+bWidth-ImgW;
document.getElementById(tfloor).style.left=buyLeft-left+"px";
alert(document.documentElement.scrollTop);
alert(buyTop);
alert(document.documentElement.scrollLeft);
alert(bWidth);
alert(buyLeft);
}
setInterval('permute("Tdiv",2,2)',3000);
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/16_10/
（3）Tips
应该是懂了，图像的移动太绕。
z-index，显示在最上层。
document.body.scrollTop，document.documentElement.scrollTop。