// 套路

    wrap.onClick = function(e) {
        const event = e || window.event
        const el = event.srcElement; // srcElement或者target
        if(el.className === 'del') {
            const index = el.getAttribute('index')
            const input = tr[index].getElementsByTagName('input')[0]
            input.checked = false
            input.onclick() // 这样就是手动触发onclick事件
        }
    }

smallBox.onmousemove = function(e) {
	// 确定放大镜的位置
	let left = e.clientX - demo.offsetLeft - smallBox.offsetLeft - floatBox.offsetWidth / 2
	let top = e.clientY - demo.offsetTop - smallBox.offsetTop - floatBox.offsetHeight / 2
	floatBox.style.left = left + 'px'
	floatBox.style.top = top + 'px'
	// 确定大图片的位置
	let bigImgLeft = (left / (smallBox.offsetWidth - floatBox.offsetWidth)) * (bigImg.offsetWidth - bigBox.offsetWidth)
	let bigImgTop = (top / (smallBox.offsetHeight - floatBox.offsetHeight)) * (bigImg.offsetHeight - bigBox.offsetHeight)
	bigImg.style.left = -bigImgLeft + 'px'
	bigImg.style.top = -bigImgTop + 'px'
}

// 没有写完，教程声明的变量太多，把握不住关键
let endX = 0
let endY = 0
let timer = null
document.onmousemove = function(e) {
	const e = window.event || e
	endX = e.pageX
	endY = e.pageY
}
document.onmouseup = function() {
	clearInterval()
}
// 为面板添加控制元素
function Resizable(panel_id, ctrl_id) {
	const panel = document.getElementById(panel_id)
    const ctrl = document.getElementById(ctrl_id)
	const r = docuemnt.createElement('div')
	panel.appendChild(r)

	// 为控制元素添加拖拽处理
	r.addEventListener('mousedown', e => {
        timer = setInterval(() => {
            if(timer) {
                ctrl.style.left =
            }
        }, 10)
    })
}

const img = document.getElementById('Img')
const maxWidth = img.width * 2 // 最大值
const toMax = () => {
	const endWidth = img.width * 1.3 // 每次点击后的宽度
	const timer = setInterval(() => {
		if (img.width < endWidth) {
			if (img.width < maxWidth) {
				img.width = img.width * 1.05
				img.height = img.height * 1.05
			} else {
				console.log('图片已经最大')
				clearInterval(timer)
			}
		} else {
			clearInterval(timer)
		}
	}, 20)
}

const $ = function(id) {
    return document.getElementById(id)
}
const addEvent = function(obj, event, fn) {
    if(obj.addEventListener) {
        obj.addEventListener(event, fn, false)
    } else {
        obj.attachEvent('on' + event, fn)
    }
}
const domSider = $('side')
const scrollEvent = function() {
    const sideHeight = domSider.offsetHeight
    const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop
    if(crollHeight + screenHeight > sideHeight) {
        domSider.style.cssText = `position: fixed; right: 0; top: ${-(sideHeight - screenHeight)}px`
    } else {
        domSider.style.position = 'static'
    }
}
addEvent(window, 'scroll', scrollEvent())
addEvent(window, 'resize', scrollEvent())

window.onload = function() {
    // 页面可视区域的高度
    const clientHeight = document.documentElement.clientHeight
    const btn = document.getElementById('btn')
    const timer = null
    let isTop = true
    btn.onclick = function() {
        timer = setInterval(function() {
            // 获取滚动条的高度
            const osTop = document.documentElement.scrollTop || document.body.scrollTop
            const ispeed = Math.floor(-osTop / 5)
            document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
            isTop = true
            if(osTop === 0) {
                clearInterval(timer)
            }
        }, 30)
    }
    window.onscroll = function() {
        // 按钮的显示隐藏
        const osTop = document.documentElement.scrollTop || document.body.scrollTop
        if(osTop > = clientHeight) {
            obtn.style.display = 'block'
        } else {
            obtn.style.display = 'none'
        }
        // 这个没有弄明白（滚动条滚动的时候用户是否滚动滚轮）
        if(!isTop) {
            clearInterval(timer)
        }
        isTop = false
    }
}