一、上周练习题
计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器升级版</title>
<style type="text/css">
.wrap{
width: 250px;
margin: 0 auto;
}
button{
width: 60px;
line-height: 30px;
}
.top{
margin: 0 auto;
width: 242px;
height: 72px;
border:1px inset;
}
p{
text-align: right;
font-size: 18px;
margin: 0px;
line-height: 36px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="top">
<p id="pro">0</p>
<p id="res"></p>
</div>
<table cellspacing="0">
<tr>
<td><button onclick="func('+')">+</button></td>
<td><button onclick="func('-')">-</button></td>
<td><button onclick="func('*')">*</button></td>
<td><button onclick="func('/')">/</button></td>
</tr>
<tr>
<td><button onclick="func('7')">7</button></td>
<td><button onclick="func('8')">8</button></td>
<td><button onclick="func('9')">9</button></td>
<td><button onclick="func('c')">C</button></td>
</tr>
<tr>
<td><button onclick="func('4')">4</button></td>
<td><button onclick="func('5')">5</button></td>
<td><button onclick="func('6')">6</button></td>
<td rowspan="3"><button onclick="func('=')" style="line-height: 110px;">=</button></td>
</tr>
<tr>
<td><button onclick="func('1')">1</button></td>
<td><button onclick="func('2')">2</button></td>
<td><button onclick="func('3')">3</button></td>
</tr>
<tr>
<td colspan="2"><button onclick="func('0')" style="width: 120px;">0</button></td>
<td><button onclick="func('.')">.</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
var proc=document.getElementById('pro');
var result=document.getElementById('res');
var str1='';
var str2;
function func(msg){
if(msg=='='){
if(str1==''){
result.innerHTML=0;
return 0;
}
str2=eval(str1);
if(str2=='Infinity'){
result.innerHTML='除数不能为零';
}else{
proc.innerHTML=result.innerHTML;
result.innerHTML=str2;
}
}else if(msg=='c'){
str1='';
str2='';
proc.innerHTML=str1;
result.innerHTML=str2;
}else{
str1+=msg;
result.innerHTML=str1;
}
}
</script>
</body>
</html>运行截图：
多选框：全选，全不选，反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选全不选</title>
</head>
<body>
<input type="checkbox">连衣裙<br>
<input type="checkbox">香奈儿口红<br>
<input type="checkbox">YSL口红<br>
<input type="checkbox">打火机<br>
<button>全选</button>
<button>全不选</button>
<button>反选</button>
<script type="text/javascript">
var btns=document.getElementsByTagName('button');
var inps=document.getElementsByTagName('input');
//全选
btns[0].onclick=function(){
for(var i=0;i<inps.length;i++){
inps[i].checked=true;
}
}
//全不选
btns[1].onclick=function(){
for(var i=0;i<inps.length;i++){
inps[i].checked=false;
}
}
//反选
btns[2].onclick=function(){
for(var i=0;i<inps.length;i++){
// if(inps[i].checked==false){
// inps[i].checked=true;
// }else{
// inps[i].checked=false;
// }
inps[i].checked=!inps[i].checked;
}
}
</script>
</body>
</html>简易选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{margin: 0px;padding:0px;list-style: none;}
.wrap{
width: 306px;
height: 302px;
border:1px solid #f1e1ff;
margin: 0 auto;
}
.title{
overflow: hidden;
font-size: 18px;
}
.title li{
float: left;
width: 100px;
border:1px solid #ca8eff;
background-color: #f1e1ff;
text-align: center;
line-height: 40px;
}
.title .active{
background-color: #dcb5ff;
}
.content li{
height: 260px;
border:1px solid #ca8eff;
display: none;
}
.content .active{
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="title">
<li class="active">话费</li>
<li>机票</li>
<li>酒店</li>
</ul>
<ul class="content">
<li class="active">内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
<script type="text/javascript">
// 获取元素对象
var uls=document.getElementsByClassName('title');
var tit = uls[0].getElementsByTagName('li');
var conts = document.getElementsByClassName('content');
var cli = conts[0].getElementsByTagName('li');
// 遍历所有标题li 并添加移入事件
for(var i=0;i<tit.length;i++){
// 存储标题的索引 标题的索引和内容的索引一一对应
tit[i].index=i;
tit[i].onmouseover=function(){
// 初始化 清除所有标题的 active属性
for(var j=0;j<tit.length;j++){
// 初始化标题的类 不管移入是谁 先将所有标题的类删除
tit[j].removeAttribute('class');
// 初始化内容 部分 不管移入是哪个标题 将所有内容的类删除
cli[j].removeAttribute('class');
}
// 移入谁给谁添加active属性
this.setAttribute('class','active');
// 移入的哪个标题给标题对应的内容添加active
cli[this.index].setAttribute('class','active');
}
}
</script>
</body>
</html>二、数组
数组的定义
1.使用系统内置的Array()函数，创建一个数组
2.直接定义
数组的操作
1.push():从尾部添加，会改变原数组
2.pop():弹出数组中最后一个元素，会改变原数组，有返回值，将弹出的元素返回
3.unshift():前面插入元素，会改变原数组
4.shift():从前面删除第一个元素，会改变原数组，有返回值，将删除后的元素返回
5.splice():通过索引操作，会修改原数组，将删除后的元素组成新数组返回。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script>
// 数组的定义
// 1.使用系统内置的Array（） 创建一个数组
// var arr = new Array();
// 2.直接定义
var arr=['a','b'];
// 通过索引操作数组 可以修改可以添加 可以查询
arr[0]='A';
arr[2]='c';
arr[10]='o';
console.log(arr[9]);
console.log(arr);
// 内置方法
// 从尾部添加 push() 会改变原数组
console.log(arr);
arr.push('c','d');
console.log(arr);
// 弹出数组中最后一个元素pop() 会改变原数组 有返回值 将弹出后的元素返回
var res = arr.pop();
console.log(arr);
console.log(res);
// 行前面插入元素unshift()，会改变原数组
arr.unshift('A','B');
arr.unshift('C');
console.log(arr);
// 从前面删除第一个元素 会改变原数组 有返回值 将删除后的元素返回
var res = arr.shift();
console.log(arr);
console.log(res);
// 通过索引操作的内置方法 splice() 会修改原数组 将删除后元素 组成的新数组返回
// 如果只传一个参数是从哪个索引值开始删 删到最后
// 如果传二个参数 第二个参数代表删除几个
// 如果传了三个或者更多的参数 从第三个参数开始作为被替换的元素插入到数组当中
// 替换元素不足时，前移补齐
var res = arr.splice(1,2,5,6);
console.log(arr);
console.log(res);
</script>
</body>
<html>
三、数学对象
Math.abs():绝对值
Math.floor():向下取整
Math.ceil():向上取整
Math.round():四舍五入
Math.max():取最大值
Math.min():取最小值
Math.random():0-1之间的随机小数(到0，不到1)
//封装函数 取n-m之间的随机整数
function rand(n,m){
return Math.floor(Math.random()*(m-n+1))+n;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数学对象</title>
</head>
<body>
<script type="text/javascript">
//绝对值
console.log(Math.abs(-10));
//向下取整
console.log(Math.floor(1.9));
//向上取整
console.log(Math.ceil(1.1));
//四舍五入
console.log(Math.round(1.5));
//取最大值
console.log(Math.max(1,10,30,-40));
//取最小值
console.log(Math.min(-4,10,32));
//0到1之间的随机小数（可能取到0，取不到1）
console.log(Math.random());
//取0-10随机整数
console.log(Math.floor(Math.random()*11));
//取1-10的随机整数
console.log(Math.floor(Math.random()*10)+1);
//取3-10的随机整数
//10-3=7 先取0-7之间的随机整数
console.log(Math.floor(Math.random()*(10-3+1))+3);
//封装函数 取n-m之间的随机整数
function rand(n,m){
return Math.floor(Math.random()*(m-n+1))+n;
}
</script>
</body>
</html>四、定时器
一般情况下，定时器用来完成动画效果。
定时器不会阻塞程序执行，是并行执行的。
单次定时器：setTimeout()
多次定时器（循环定时器）：setInterval()
清除定时器：
清除单次定时器：clearTimeout(指定定时器的返回值)
清除多次定时器clearInterval(参数同上)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<script>
var a=1;
//启动一个单次定时器 等待指定时间 执行一次指定的函数
//格式：setTimeout(函数，时间值(毫秒))
var flag=setTimeout(function(){
a++;
console.log('我是单次定时器',a);
},3000);
console.log('a:',a);
console.log(flag);
//清除单次定时器
clearTimeout(flag);
//多次定时器
var flag1=setInterval(function(){
a++;
console.log('我是多次定时器',a);
},3000);
console.log(a);
//配合单次定时器使用，让多次定时器执行三次后清除
setTimeout(function(){
clearInterval(flag1);
},9001)
</script>
</body>
</html>五、练习题
随机变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习：随机变色</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script type="text/javascript">
//获取元素对象
var oDivs=document.getElementsByClassName('box');
setInterval(function(){
for(var i=0;i<oDivs.length;i++){
oDivs[i].style.backgroundColor='rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')';
}
},100);
//随机数
function rand(n,m){
return Math.floor(Math.random()*(m-n+1))+n;
}
</script>
</body>
</html>随机点名（实现不可重复中奖）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机点名</title>
<style type="text/css">
.wrap{
width: 400px;
/*height: 400px;*/
border-radius: 20px;
border: 1px solid red;
background-color: pink;
}
.uname{
width: 220px;
height: 50px;
background-color: #fff;
margin: 50px auto;
text-align: center;
line-height: 50px;
font-size: 30px;
font-weight: bold;
color: #c66;
}
.btn{
width: 100px;
margin: 0 auto;
}
.list{
padding-top:20px;
margin: 0px auto;
}
p{
text-align: center;
line-height: 15px;
font-size: 20px;
font-weight: bold;
color: #900;
}
</style>
</head>
<body>
<div class="wrap">
<div class="uname">姓名</div>
<div class="btn">
<button id="start">开始</button>
<button id="end">结束</button>
</div>
<div class="list"></div>
</div>
<script type="text/javascript">
//获取按钮对象
var Start=document.getElementById('start');
var End=document.getElementById('end');
var showName=document.getElementsByClassName('uname');
var Lists=document.getElementsByClassName('list');
var flag;
var name;
var index;
//定义数据
var arr=['张三','李四','刘德华','彭于晏','刘聪','王五','赵六','刘晓华','小明'];
//给开始按钮添加单击事件
Start.onclick=function(){
//随机取名字
flag=setInterval(function(){
index=rand(0,arr.length-1);
name=arr[index];
showName[0].innerHTML=name;
},50);
Start.setAttribute('disabled','true');
};
End.onclick=function(){
clearInterval(flag);
Start.disabled=false;
Lists[0].innerHTML+='<p>'+arr[index]+'恭喜中奖'+'</p>';
arr.splice(index,1);
console.log(arr);
}
//随机函数
function rand(n,m){
return Math.floor(Math.random()*(m-n+1))+n;
}
</script>
</body>
</html>执行截图：
5204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
