JS，CSS和HTML做的动漫效果和随机点名器，sort() ，setAttribute，数组【诗书画唱】
将images文件中的图片连续播放成一段动画：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//push()方法是数组的栈底添加 意思是往数组的底部添加
//unshift()方法是数组的栈顶添加 意思是往数组的头部添加
console.log(nameArr);
// var nameArr = [
// "images/1.gif",
// "images/2.gif",
// ];
var clear=null;
// 或写成
//var clear=undefined;
// 或
//var clear;
console.log(clear);
var flag = true;
function doStart() {
var i = 0;
if(flag) {
clear = setInterval(function() {
document.getElementById("nameDiv").setAttribute('src',nameArr[i]);
i++;
if(i >= nameArr.length) {
i = 0;
}
}, 100);
flag = false;
}
}
console.log(clear);
function doStop() {
if(clear) {
clearInterval(clear);
flag = true;
}
}
console.log(clear);
</script>
<body>
<table border="0" width="100%">
<tr>
<td align="center">
<input type="button" value="循环播放" onclick="doStart();" />
<input type="button" value="停止" onclick="doStop();" />
</td>
</tr>
<tr>
<td align="center">
<img src="images/1.gif" id="nameDiv" >
</td>
</tr>
</table>
</body>
</html>
//sort() 方法用于对数组的元素进行排序。
//如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
//
//如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
//
//若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
//若 a 等于 b，则返回 0。
//若 a 大于 b，则返回一个大于 0 的值。
随机点名器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
font-size: 100px;
}
</style>
<script>
//1、数组
//var nameArr = new Array('张三','李四');
var nameArr = [
'钟建',
'彭康',
'易国鹏',
'张文龙',
'邹文忠',
'曾仪',
'宋赣',
'姜兰兰',
'刘伟',
'夏雨彤',
'唐艳平',
'彭浩瀚',
'阮广',
'张志豪',
'文俊男',
'盛配琳',
'石艳艳',
'周子毅',
'诗书画唱',
'胡新海',
'柴杰昌',
'彭烈荣',
'旷志林',
'周鸿运',
'廖文彬',
'杨文彬'
];
//定时器的遥控器
var iv;
//保证setInterval函数同一时间只有一个在运行
var flag = true;
function doStart(){
//打乱数组中名字的顺序
//Math.random()随机产生0到1之间的一个小数
//取出数组中的任意两个元素进行排位
nameArr.sort(function(a,b){
return 0.5 - Math.random();
});
//实现名字的不断的变化
//2、setInterval函数:不断的重复执行指定的函数
//每隔一秒钟就换一个名字
//1000表示1000毫秒也就是1秒
var i = 0;
if(flag) {
iv = setInterval(function(){
document.getElementById('nameDiv').innerHTML = nameArr[i];
i ++;
//当i大于等于数组的长度时，就无法取到数组中的名字了
if(i >= nameArr.length) {
i = 0;
}
},10);
flag = false;
}
}
function doStop(){
//停止名字的闪动
if(iv) {
clearInterval(iv);
flag = true;
}
}
//作业：找一些连续的图片，将这些图片做成动画效果
</script>
</head>
<body>
<table border="0" width="100%">
<tr>
<td align="center">
<input type="button" value="继续" onclick="doStart();" />
<input type="button" value="就是你" onclick="doStop();" />
</td>
</tr>
<tr>
<td align="center">
<div id="nameDiv" style="font-size: 80px;">姓名</div>
</td>
</tr>
</table>
</body>
</html>
