js -- 事件练习
2018-08-21 本文已影响49人
GHope
1、实现点击按钮，滚动条走动和百分比走动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kuang{
width: 300px;
height: 30px;
border: 3px solid #000;
}
#jindutiao{
background-color: red;
float: left;
height: 100%;
text-align: center;
line-height: 150%;
}
</style>
</head>
<body>
<button id="begin" onclick="run()">begin</button>
<div class="kuang">
<div id="jindutiao" style="width: 0%;" ></div></div>
<p id="jindu">0%</p>
</body>
</html>
<script type="text/javascript">
// var obtnb = document.getElementById('begin')
var odivj = document.getElementById('jindutiao')
var opj = document.getElementById('jindu')
function run(){
odivj.style.width = parseInt(odivj.style.width) + 1 + '%';
opj.innerHTML = odivj.style.width;
if(odivj.style.width == "100%"){
window.clearTimeout(timeout);
return;
}
var timeout=window.setTimeout("run()",666);
}
</script>
进度条.gif
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动条效果</title>
<style>
div {
width: 500px;
height: 100px;
border: 1px dashed black;
}
#nei {
background-color: pink;
width: 0px;
border: none;
}
</style>
</head>
<body>
<h1>滚动条</h1>
<button id="btn">点击我</button>
<br><br><br>
<div>
<div id="nei" style="width: 500px;"></div>
</div>
<span id="per">100%</span>
<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
this.disabled = true
var onei = document.getElementById('nei')
var oper = document.getElementById('per')
i = 0
// 将#nei这个div的宽度从0慢慢的变成500即可
var timer = setInterval(function () {
i += 2
// 将i设置为nei div的宽度
onei.style.width = i + 'px'
// 时刻修改span里面的内容
oper.innerHTML = (i / 5) + '%'
// 判断i有没有达到div宽度
if (i == 500) {
// 销毁定时器
clearInterval(timer)
obtn.disabled = false
}
}, 10)
}
</script></body></html>
2、实现秒表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.xianshiqi{
height: 200px;
background-color: aquamarine;
font-size: 150px;
text-align: center;
}
.caozuo{
height: 200px;
text-align: center;
}
button{
height: 100px;
width: 30%;
margin: 10px;
font-size: 33px;
}
</style>
</head>
<body>
<div class="xianshiqi">
<p id="second_watch">00:00:00</p>
</div>
<div class="caozuo">
<button id="begin" onclick="begin()">开始</button>
<button id="pause" onclick="pause()">暂停</button>
<button id="reset" onclick="reseta()">重置</button>
</div>
</body>
</html>
<script>
var i1 = 0; //分钟第一位
var i2 = 0; //分钟第二位
var s1 = 0; //秒第一位
var s2 = 0; //秒第二位
var ms1 = 0; //百分秒第一位
var ms2 = 0; //百分秒第二位
var t; //计时函数保存
function begin(){
document.getElementById("begin").disabled = "true"; //开始后使开始按钮失效，防止多次点击计时加快的bug
ms2++; //只需百分秒最后一位自加，前面依次进位
if(ms2>9){
ms2 = 0;
ms1++;
}
if(ms1>9){
ms1 = 0;
s2++;
}
if(s2>9){
s2 = 0;
s1++;
}
if(s1>5){
s1 = 0;
i2++;
}
if(i2>9){
i2 = 0;
i1++;
}
if(i1>5){
//超出秒表计数范围
clearTimeout(t);
return false;
}
document.getElementById("second_watch").innerHTML = ""+i1+i2+":"+s1+s2+":"+ms1+ms2+"";
document.getElementById("second_watch").style.color = "black";
t = setTimeout("begin()",10); //百分秒百分之一秒执行一次
}
function pause(){
clearTimeout(t);
document.getElementById("second_watch").style.color = "red";
document.getElementById("begin").disabled = ""; //停止时恢复按钮功能
}
function reseta(){
clearTimeout(t);
i1 = 0;
i2 = 0;
s1 = 0;
s2 = 0;
ms1 = 0;
ms2 = 0;
document.getElementById("second_watch").innerHTML = ""+i1+i2+":"+s1+s2+":"+ms1+ms2+"";
document.getElementById("second_watch").style.color = "black";
document.getElementById("begin").disabled = "";
}
</script>
秒表.gif
<html><head>
<meta charset="UTF-8">
<title>NO.2</title>
<style type="text/css">
#d1{
height: 300px;
width: 100%;
font-size: 300px;
color: #FF0000;
line-height: 300px;
text-align: center;
background-color: rgb(100,100,100);
}
#d2{
height: 200px;
width: 100%;
background-color: rgb(200,200,200);
}
button{
font-size: 50px;
border-radius: 10px;
color: purple;
width: 150px;
position: relative;
margin-left: 130px;
text-align: center;
}
</style>
</head>
<body>
<!--2、实现秒表-->
<div id="d1">00:00</div>
<div id="d2">
<button id="btn1">开始</button>
<button id="btn2">暂停</button>
<button id="btn3">重置</button>
</div>
<script>
// 前面是秒 后面是10ms
var ostart = document.getElementById('btn1')
var ostop = document.getElementById('btn2')
var oreset = document.getElementById('btn3')
var odiv = document.getElementById('d1')
var timer = null
var i = 0
// 开始函数
ostart.onclick = function () {
// 周期性定时器一直在修改div的值
timer = setInterval(function () {
i++
// 根据i计算前面的值和后面的值 228 02:28
first = parseInt(i / 100)
second = i % 100
// 将i设置为div后面的值
odiv.innerHTML = buling(first) + ':' + buling(second)
}, 10)
}
// 暂停
ostop.onclick = function () {
clearInterval(timer)
}
// 重置函数
oreset.onclick = function () {
// 清掉定时器
clearInterval(timer)
// 计数器清零
i = 0
// 显示也清零
odiv.innerHTML = '00:00'
}
function buling(number) {
if (number < 10) {
return '0' + number
}
return number
}
</script></body></html>
3、实现文字时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字时钟</title>
</head>
<body>
<div id="showTime"></div>
</body>
</html>
<script language="javascript">
function timer(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var weekday = date.getDay();
if(weekday==0){
weekday="星期日";
}
if(weekday==1){
weekday="星期一";
}
if(weekday==2){
weekday="星期二";
}
if(weekday==3){
weekday="星期三";
}
if(weekday==4){
weekday="星期四";
}
if(weekday==5){
weekday="星期五";
}
if(weekday==6){
weekday="星期六";
}
document.getElementById("showTime").innerHTML = "<h1>当前日期是："+year+"年"+month+"月"+day+"日 "+weekday+" <br>现在时间是："+hour+"时"+minute+"分"+second+"秒</h1>";
}
var t = setInterval("timer()",1000);
clearInterval("t");
</script>
文字时钟.gif
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字时钟</title>
</head>
<body>
<h1 id="lala">当前时间为:2018年8月22号 星期三 16:42:10</h1>
<script>
var oh = document.getElementById('lala')
setInterval(function () {
// 一直修改oh的内容
var od = new Date()
// 获取年份
var year = od.getFullYear()
// 获取月份
var month = od.getMonth() + 1
// 获取日期
var day = od.getDate()
// 获取星期几
var weekday = change_weekday(od.getDay())
// 获取小时
var hour = od.getHours()
// 获取分钟
var minute = od.getMinutes()
// 获取秒数
var second = od.getSeconds()
oh.innerHTML = '当前时间为:' + year + '年' + month + '月' + day + '号 ' + weekday + ' ' + hour + ':' + minute + ':' + second
}, 1000)
function change_weekday(number) {
switch (number) {
case 0:
return '星期天'
break;
case 1:
return '星期一'
break;
case 2:
return '星期二'
break;
case 3:
return '星期三'
break;
case 4:
return '星期四'
break;
case 5:
return '星期五'
break;
case 6:
return '星期六'
break;
}
}
</script></body></html>
4、处理className兼容，自己实现getByClassName
function getByClassName(ClassName){
if(document.getElementsByClassName){
return document.getElementsByClassName(ClassName);
}else{
var aEle=document.getElementsByTagName('*');
var arr=[];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==ClassName){
arr.push(aEle[i])
}
}
return arr;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>处理classname兼容</title>
</head>
<body>
<div id="tang">
<div class="song yuan qing"></div>
<div class="song"></div>
<div class="ming"></div>
</div>
<div class="song"></div>
<div class="song"></div>
<script>
// var adivs = document.getElementsByClassName('song')
var odiv = document.getElementById('tang')
// var adivs = odiv.getElementsByClassName('song')
// console.log(adivs)
//*
function getByClassName(obj, classname) {
// 首先找到所有的标签
var abiaos = obj.getElementsByTagName('*')
// 定义一个数组，用来保存符合要求的节点对象
var arr = []
// 遍历每一个标签，将标签的内容得到
for(var i = 0; i < abiaos.length; i++) {
// 得到当前对象的class
var leiming = abiaos[i].className
// 将leiming这个字符串按照空格切割
var arr1 = leiming.split(' ')
// 遍历所有的类名，判断有没有classname, 有的话就要这个节点，没有就不要这个节点
for (var j = 0; j < arr1.length; j++) {
if (arr1[j] == classname) {
arr.push(abiaos[i])
}
}
}
return arr
} //*/
console.log(getByClassName(odiv, 'song'))
// console.log('song'.split(' '))
</script></body></html>
5、短信倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发送短信</title>
</head>
<script type="text/javascript">
var countdown = 60;
function settime(obj) {
if(countdown == 0) {
obj.removeAttribute("disabled");
obj.value = "免费获取验证码";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.value = "重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(obj)
}, 1000)
}
</script>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
</body>
</html>
倒计时.gif
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>短信倒计时</title>
</head>
<body>
<button id="btn" style="width:400px; height:100px; font-size:50px;">点击发送短信</button>
<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
this.disabled = true
var i = 5
var timer = setInterval(function () {
obtn.innerHTML = i + 's之后重新发送'
// 判断定时器何时销毁
if (i == 0) {
clearInterval(timer)
obtn.innerHTML = '点击发送短信'
obtn.disabled = false
}
i--
}, 1000)
}
</script></body></html>
