js基础案例整理(持续更新)
这里写目录标题
- 一级目录
-
- 二级目录
-
- 三级目录
- 037 实现图片懒加载
- 036-网页日历
- 035-记住用户名(js代码)
- 034-基础轮播图(js代码)
- 033-京东放大镜效果(js代码)
- 032-简单动画函数封装
- 031-仿淘宝固定侧边栏+返回顶部按钮
- 030-拖动的模态框
- 029-发送短信倒计时案例
- 028-倒计时效果
- 027-模拟京东快递单号查询案例
- 026-模拟京东按键输入内容
- 025-跟随鼠标移动的小人
- 024-动态生成表格案例
- 023-删除留言案例
- 022-新浪下拉菜单
- 021-Tab栏切换(仿京东)
- 020-全选与反选
- 019-表格隔行变色
- 018-开关灯效果
- 017-仿新浪注册页面框
- 016-淘宝关闭二维码案例
- 015-仿京东显示隐藏密码效果
- 014-查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
- 013-去除数组中重复的元素
- 012-静态倒计时效果
- 011-基础冒泡排序
- 010-删除指定数组的元素
- 009-往数组存放100个值
- 008-求数组中最大的值
- 007-计算数组的和以及平均值
- 006-while循环案例
- 005-打印九九乘法表
- 004-打印倒三角形
- 003-打印n行n列的星星
- 002-查询水果案例
- 001-判断闰年平年
一级目录
二级目录
三级目录
037 实现图片懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html body {
padding: 0;
margin: 0;
}
img {
width: 400px;
display: block;
margin: 0 auto;
height: 300px;
}
div {
height: 400px;
border: 1px solid red;
}
</style>
<body>
<img data-src="./banner.jpg" alt="">
<img data-src="./jj.jpeg" alt="" >
<img data-src="./pic/1.jpg" alt="" >
<img data-src="./pic/2.jpg" alt="">
<img data-src="./pic/3.jpg" alt="">
<img data-src="./pic/4.jpg" alt="">
<img data-src="./pic/5.jpg" alt="" >
<script>
const imgs = document.querySelectorAll('img');
const len = imgs.length
function isShow(img) {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = document.documentElement.clientHeight;
const offsetTop = img.offsetTop
//判断当前img是否出现了在视野中。
return offsetTop < (windowHeight + scrollTop)
}
// 节流函数
function throttle(fn, delay) {
// oldTime为上一次触发回调的时间, timer是定时器
let oldTime = 0, timer = null;
// 将throttle处理结果当作函数返回
return function () {
// 记录本次触发回调的时间
let nowTime = +new Date()
// 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
if (nowTime - oldTime < delay) {
// 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
clearTimeout(timer)
timer = setTimeout(function () {
oldTime = nowTime
fn()
}, delay)
} else {
// 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
oldTime = nowTime
fn()
}
}
}
function lazyLoad() {
let count = 0;
//利用闭包来保存一个变量，每次记录更换src的最终位置，这样就不用每次都全部遍历
return () => {
for (var i = count; i < len; i++) {
//如果img到达视野内
if (isShow(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
//把img的src换成data-src里面的真实地址，并且记录下最后换到那个位置，
count = i;
}
}
}
}
//用变量来接收lazyLoad运行结果
let lazy = lazyLoad()
//首页加载刚进去需要加载一下
lazy()
window.addEventListener('scroll', throttle(lazy, 300), false)
</script>
</body>
</html>
036-网页日历
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
#data {
width: 300px;
border: 1px solid #000;
margin: 20px auto;
}
#data > p {
display: flex;
}
#data > p span{
padding: 0 10px;
}
#data > h5 {
text-align: center;
}
#prev,#next {
cursor: pointer;
}
#nian {
flex: 1;
text-align: center;
}
#title {
overflow: hidden;
list-style: none;
background-color: #ccc;
}
#title li {
float: left;
width: 40px;
height: 26px;
line-height: 26px;
text-align: center;
}
#date {
overflow: hidden;
list-style: none;
}
#date li {
float: left;
width: 34px;
height: 34px;
margin: 1px 1px;
border: 2px solid #000;
line-height: 34px;
text-align: center;
cursor: pointer;
list-style: none;
}
#date > .hover:hover {
border:2px solid red;
}
.active{
color:red
}
style>
head>
<body>
<div id="data">
<p>
<span id="prev">上一月span>
<span id="nian">2022span>
<span id="next">下一月span>
p>
<h5 id="yue">一月h5>
<ul id="title">
<li>日li>
<li>一li>
<li>二li>
<li>三li>
<li>四li>
<li>五li>
<li>六li>
ul>
<ul id="date">ul>
div>
<script>
let date = new Date(); //获取默认时间对象
add() // 当页面第一次进入时触发一下
function add() {
let cYear = date.getFullYear(); //获取当前年份
let cMonth = date.getMonth(); //获取当前月份
let cDay = date.getDate() // 当前的天
console.log(cDay,'1');
// 每个月的第一天是周几
let week = new Date(cYear,cMonth,1).getDay()
// 获取每个月的天数
let days = new Date(cYear,cMonth+1,-1).getDate()+1;
let arr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月',]
document.getElementById('nian').innerHTML = cYear
document.getElementById('yue').innerHTML = arr[cMonth]
let html = '';
for(var i = 0; i < week; i++) {
html += ''
}
for(var i = 1; i <= days; i++) {
if( i == cDay) {
html += '' +i+''
}
html += '' +i+''
}
document.getElementById('date').innerHTML = html
}
document.getElementById('prev').onclick = function(){
date.setMonth(date.getMonth()-1);
add()
}
document.getElementById('next').onclick = function(){
date.setMonth(date.getMonth()+1);
add()
}
script>
body>
html>
035-记住用户名(js代码)
效果图:
示例代码:
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<input type="text" id="username" />
<input type="checkbox" name="" id="remember" /> 记住用户名
<script>
var username = document.querySelector('#username')
var remember = document.querySelector('#remember')
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username')
remember.checked = true
}
remember.addEventListener('change', function () {
if (this.checked) {
localStorage.setItem('username', username.value)
} else {
localStorage.removeItem('username')
}
})
</script>
</body>
</html>
034-基础轮播图(js代码)
效果图:
示例代码:
window.addEventListener('load', function () {
// 1. 获取元素
var arrow_l = document.querySelector('.arrow-l')
var arrow_r = document.querySelector('.arrow-r')
var focus = document.querySelector('.focus')
var focusWidth = focus.offsetWidth
// 2. 鼠标经过focus 就显示隐藏左右按钮
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block'
arrow_r.style.display = 'block'
clearInterval(timer)
timer = null // 清除定时器变量
})
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none'
arrow_r.style.display = 'none'
timer = setInterval(function () {
//手动调用点击事件
arrow_r.click()
}, 2000)
})
// 3. 动态生成小圆圈 有几张图片，我就生成几个小圆圈
var ul = focus.querySelector('ul')
var ol = focus.querySelector('.circle')
// console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
// 创建一个小li
var li = document.createElement('li')
// 记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i)
// 把小li插入到ol 里面
ol.appendChild(li)
// 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
li.addEventListener('click', function () {
// 干掉所有人 把所有的小li 清除 current 类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
// 留下我自己 当前的小li 设置current 类名
this.className = 'current'
// 5. 点击小圆圈，移动图片 当然移动的是 ul
// ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
// 当我们点击了某个小li 就拿到当前小li 的索引号
var index = this.getAttribute('index')
// 当我们点击了某个小li 就要把这个li 的索引号给 num
num = index
// 当我们点击了某个小li 就要把这个li 的索引号给 circle
circle = index
// num = circle = index;
console.log(focusWidth)
console.log(index)
animate(ul, -index * focusWidth)
})
}
// 把ol里面的第一个小li设置类名为 current
ol.children[0].className = 'current'
// 6. 克隆第一张图片(li)放到ul 最后面
var first = ul.children[0].cloneNode(true)
ul.appendChild(first)
// 7. 点击右侧按钮， 图片滚动一张
var num = 0
// circle 控制小圆圈的播放
var circle = 0
// flag 节流阀
var flag = true
arrow_r.addEventListener('click', function () {
if (flag) {
flag = false // 关闭节流阀
// 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
if (num == ul.children.length - 1) {
ul.style.left = 0
num = 0
}
num++
animate(ul, -num * focusWidth, function () {
flag = true // 打开节流阀
})
// 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++
// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
if (circle == ol.children.length) {
circle = 0
}
// 调用函数
circleChange()
}
})
// 9. 左侧按钮做法
arrow_l.addEventListener('click', function () {
if (flag) {
flag = false
if (num == 0) {
num = ul.children.length - 1
ul.style.left = -num * focusWidth + 'px'
}
num--
animate(ul, -num * focusWidth, function () {
flag = true
})
// 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--
// 如果circle < 0 说明第一张图片，则小圆圈要改为第4个小圆圈（3）
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
circle = circle < 0 ? ol.children.length - 1 : circle
// 调用函数
circleChange()
}
})
function circleChange() {
// 先清除其余小圆圈的current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
// 留下当前的小圆圈的current类名
ol.children[circle].className = 'current'
}
// 10. 自动播放轮播图
var timer = setInterval(function () {
//手动调用点击事件
arrow_r.click()
}, 2000)
})
033-京东放大镜效果(js代码)
效果图:
示例代码:
window.addEventListener('load', function () {
var preview_img = document.querySelector('.preview_img')
var mask = document.querySelector('.mask')
var big = document.querySelector('.big')
// 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
preview_img.addEventListener('mouseover', function () {
mask.style.display = 'block'
big.style.display = 'block'
})
preview_img.addEventListener('mouseout', function () {
mask.style.display = 'none'
big.style.display = 'none'
})
// 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
preview_img.addEventListener('mousemove', function (e) {
// (1). 先计算出鼠标在盒子内的坐标
var x = e.pageX - this.offsetLeft
var y = e.pageY - this.offsetTop
// console.log(x, y);
// (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
// (3) 我们mask 移动的距离
var maskX = x - mask.offsetWidth / 2
var maskY = y - mask.offsetHeight / 2
// (4) 如果x 坐标小于了0 就让他停在0 的位置
// 遮挡层的最大移动距离
var maskMax = preview_img.offsetWidth - mask.offsetWidth
if (maskX <= 0) {
maskX = 0
} else if (maskX >= maskMax) {
maskX = maskMax
}
if (maskY <= 0) {
maskY = 0
} else if (maskY >= maskMax) {
maskY = maskMax
}
mask.style.left = maskX + 'px'
mask.style.top = maskY + 'px'
// 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
// 大图
var bigIMg = document.querySelector('.bigImg')
// 大图片最大移动距离
var bigMax = bigIMg.offsetWidth - big.offsetWidth
// 大图片的移动距离 X Y
var bigX = (maskX * bigMax) / maskMax
var bigY = (maskY * bigMax) / maskMax
bigIMg.style.left = -bigX + 'px'
bigIMg.style.top = -bigY + 'px'
})
})
032-简单动画函数封装
效果图:
示例代码:
<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>Documenttitle>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
style>
head>
<body>
<div>div>
<span>夏雨荷span>
<script>
// 简单动画函数封装obj目标对象 target 目标位置
function animate(obj, target) {
var timer = setInterval(function () {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(timer)
}
obj.style.left = obj.offsetLeft + 1 + 'px'
}, 30)
}
var div = document.querySelector('div')
var span = document.querySelector('span')
// 调用函数
animate(div, 300)
animate(span, 200)
script>
body>
html>
031-仿淘宝固定侧边栏+返回顶部按钮
效果图:
示例代码:
<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>Documenttitle>
<style>
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: purple;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
}
style>
head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部span>
div>
<div class="header w">头部区域div>
<div class="banner w">banner区域div>
<div class="main w">主体部分div>
<script>
//1. 获取元素
var sliderbar = document.querySelector('.slider-bar')
var banner = document.querySelector('.banner')
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop
// 获取main 主体元素
var main = document.querySelector('.main')
var goBack = document.querySelector('.goBack')
var mainTop = main.offsetTop
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function () {
// console.log(11);
// window.pageYOffset 页面被卷去的头部
// console.log(window.pageYOffset);
// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed'
sliderbar.style.top = sliderbarTop + 'px'
} else {
sliderbar.style.position = 'absolute'
sliderbar.style.top = '300px'
}
// 4. 当我们页面滚动到main盒子，就显示 goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block'
} else {
goBack.style.display = 'none'
}
})
// 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
goBack.addEventListener('click', function () {
// 里面的x和y 不跟单位的 直接写数字即可
// window.scroll(0, 0);
// 因为是窗口滚动 所以对象是window
animate(window, 0)
})
// 动画函数
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer)
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - window.pageYOffset) / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step)
if (window.pageYOffset == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer)
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback()
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
// obj.style.left = window.pageYOffset + step + 'px';
window.scroll(0, window.pageYOffset + step)
}, 15)
}
script>
body>
html>
030-拖动的模态框
效果图:
示例代码:
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.login {
display: none;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
style>
head>
<body>
<div class="login-header">
<a id="link" href="javascript:;">点击，弹出登录框a>
div>
<div id="login" class="login">
<div id="title" class="login-title">
登录会员
<span
><a id="closeBtn" href="javascript:void(0);" class="close-login"
>关闭a
>span
>
div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：label>
<input
type="text"
placeholder="请输入用户名"
name="info[username]"
id="username"
class="list-input"
/>
div>
<div class="login-input">
<label>登录密码：label>
<input
type="password"
placeholder="请输入登录密码"
name="info[password]"
id="password"
class="list-input"
/>
div>
div>
<div id="loginBtn" class="login-button">
<a href="javascript:void(0);" id="login-button-submit">登录会员a>
div>
div>
<div id="bg" class="login-bg">div>
<script>
// 1. 获取元素
var login = document.querySelector('.login')
var mask = document.querySelector('.login-bg')
var link = document.querySelector('#link')
var closeBtn = document.querySelector('#closeBtn')
var title = document.querySelector('#title')
// 2. 点击弹出层这个链接 link 让mask 和login 显示出来
link.addEventListener('click', function () {
mask.style.display = 'block'
login.style.display = 'block'
})
// 3. 点击 closeBtn 就隐藏 mask 和 login
closeBtn.addEventListener('click', function () {
mask.style.display = 'none'
login.style.display = 'none'
})
// 4. 开始拖拽
// (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function (e) {
var x = e.pageX - login.offsetLeft
var y = e.pageY - login.offsetTop
// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px'
login.style.top = e.pageY - y + 'px'
}
// (3) 鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move)
})
})
script>
body>
html>
029-发送短信倒计时案例
效果图:
示例代码:
<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>Documenttitle>
head>
<body>
手机号码： <input type="number"> <button>发送button>
<script>
// 按钮点击之后，会禁用 disabled 为true
// 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
// 里面秒数是有变化的，因此需要用到定时器
// 定义一个变量，在定时器里面，不断递减
// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
var btn = document.querySelector('button');
var time = 3; // 定义剩下的秒数
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);
})
script>
body>
html>
028-倒计时效果
效果图:
示例代码:
<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>Documenttitle>
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
style>
head>
<body>
<div>
<span class="hour">1span>
<span class="minute">2span>
<span class="second">3span>
div>
<script>
// 1. 获取元素
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2050-8-8 18:00:00'); // 返回的是用户输入时间总的毫秒数
countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
// 2. 开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
script>
body>