目录
常用的方法：
一、计时器
二、input 表单全选和单选
三、轮播图
常用的方法：
原生JS是最基本的，拿着练手，后面会选用Layui.js、EasyUi
任务清单：
计时器！、input 表单全选和单选、轮播图：
一、计时器
应用场景：
计时器的计时器时、商场优惠活动的倒计时。
因此需要特别掌握一个基础实例
计时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习一</title>
<script>
var c = 0;
var t;
var timer_is_on = 0;
var input = document.getElementById('btn');
function timedCount() {
document.getElementById('txt').value = c;
c = c + 1;
t = setTimeout(function() {
timedCount()
}, 1000);
}
function checkButton() {
if(timer_is_on == 0) {
var input = document.getElementById('btn');
input.value = "暂停";
doTimer();
} else {
var input = document.getElementById('btn');
input.value = "启动";
stopCount();
}
}
function doTimer() {
if(!timer_is_on) {
timer_is_on = 1;
timedCount();
}
}
function stopCount() {
clearTimeout(t);
c=0;
timer_is_on = 0;
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时!" onclick="checkButton()" id="btn" />
<input type="text" id="txt" />
</form>
</body>
</html>倒计时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时器</title>
<style>
div#show{
width: 150px;
line-height: 30px;
background-color: red;
}
</style>
<script>
var timeLeft=10*1000;//设定90分钟计时器
function countTime(){
if(timeLeft==0){
alert("时间到！");
return;
}
var startMinutes=parseInt(timeLeft/(60*1000));
var startSec=parseInt(timeLeft-(startMinutes*60*1000))/1000;
document.getElementById("show").innerHTML="剩余时间:"+startMinutes+"分,"+startSec+"秒";
timeLeft=timeLeft-1000;
setTimeout(countTime,1000);
}
</script>
</head>
<body onload="countTime()">
<div id="show" >
</div>
</body>
</html>效果图：
计时器
倒计时
二、input 表单全选和单选
这个过于基础。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<label><input type="checkbox" id="topBtn" />全选/反选</label>
<div>我的爱好</div>
<div>
<label>
<input type="checkbox" class="item" />看书
</label>
<label>
<input type="checkbox" class="item" />上网
</label>
<label>
<input type="checkbox" class="item" />打球
</label>
<label>
<input type="checkbox" class="item" />写代码
</label>
</div>
<script type="text/javascript">
var items = document.getElementsByClassName('item');
var topBtn = document.getElementById('topBtn');
//为全选checkbox添加事件
topBtn.onchange = function() {
for(var i = 0; i < items.length; i++) {
items[i].checked = this.checked;
}
};
//遍历所有的items，绑定onchange事件
for(var i = 0; i < items.length; i++) {
items[i].onchange = function() {
qxFn();
};
}
var qxFn = function() {
var count = 0; //定义一个计数变量
for(var j = 0; j < items.length; j++) { //遍历items
if(items[j].checked == true) { //如果状态为选中，count+1
count++;
}
if(count == items.length) { //如果被选中的个数等于items的长度
topBtn.checked = true; //全选checkbox选中
} else {
topBtn.checked = false; //全选checkbox不选中
}
}
};
</script>
</body>
</html>三、轮播图
原生写轮播图，还是第一次接触，思路非常值得借鉴
关键是：
//把i存入当前标签的index 属性
lis[i].index = i;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
div {
border-radius: 5px;
width: 524px;
height: 190px;
background: url(img/ad-01.jpg);
margin: 0 auto;
position: relative;
}
ul {
position: absolute;
bottom: 50px;
right: 30px;
}
li {
list-style: none;
float: left;
width: 30px;
height: 30px;
border-radius: 50%;
margin-left: 10px;
background: orange;
text-align: center;
line-height: 30px;
color: white;
font-size: 21px;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
var div1= document.getElementById("div1");
var lis = document.getElementsByTagName("li");
for(var i in lis) {
//绑定一事件
//把i存入当前标签的index 属性
lis[i].index = i;
//鼠標點擊事件
lis[i].onmouseover = function() {
var url = "ad-0" + (parseInt(this.index) + 1) + ".jpg";
// alert(url)
div1.style.background = "url(img/" + url + ")";
// 1.更改div 背景图片
// 2.更改当前li的背景色
this.style.background = "red";
}
//绑定移除事件
lis[i].onmouseout = function() {
this.style.background = "orange";
}
}
</script>
</html>效果图：
