SOURCE

const box = document.querySelector('.box')
//  console.log(box.attributes) 
//  console.log(box.offsetWidth) //元素的宽度
//  console.log(box.offsetLeft)  //元素距离左边的距离



// cursor: help;  //问号图标
// cursor: wait;  //加载图标，圆圈
// cursor: crosshair;  //十字架图标
// cursor: not-allowed; //禁止图标
// cursor: zoom-in; //  放大
// cursor: grab;  //抓手
// cursor:progress   //加载中沙漏
// cursor:cell  //加号，实心
// grabbing  抓住
// move  //可移动


//  box.onmousedown = ()=>{  //鼠标按下
//     //  console.log(11)
//      box.style.cursor = 'grabbing' 

//  }
  box.onmouseup = ()=>{  //鼠标抬起触发
    //  console.log(22)
    //  box.style.cursor = 'grab' 
    
 } 
  box.onmouseover = (e)=>{  //鼠标移入触发
    // box.style.cursor = 'progress'  //加载中动画
    box.style.cursor = 'grab'  //手指样式
    //  console.log(e)
    //  console.log(e.x)  //距离x轴的距离
    //  console.log(e.y)  //距离y轴的距离
 }
  box.onmousemove = (e)=>{  //鼠标在区域内移动触发，停止不触发
    //  console.log(44)
    // console.log(e)
    //  box.style.left = e.x 
    //  box.style.top = e.y 

 }
  box.onmouseout = (e)=>{  //鼠标移出
    //  console.log(55)
    //  console.log(e)

 }


//防抖函数实现
function debounce(fn){
    let timer = null
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            console.log(1)
            // fn.call(this)
        },1000)
    }
}
// let b = debounce()  //这里不能直接传进去需要用变量赋值
// box.onclick = ()=>{
//     b()
// }

//节流函数实现
// function throttled(gapTime){
// let now = null
// let last = null
// return function(){
//     now = new Date()
//     if(!last || now - last > gapTime){
//         console.log(2)
//         last = now
//     }
// }
// }

// 第二种实现
function throttled(gapTime){
let last = new Date()
return function(){
let now = new Date()
    if( now - last > gapTime){
        console.log(2)
        last = new Date()
    }
}
}

let c = throttled(3000)  //这里不能直接传进去需要用变量赋值

// box.onclick = ()=>{
//     c()
// }

//usemap的值要和map的那么相同
//     <img src="bg.jpg" border="0" usemap="#bgImg" alt="" />
//     <map name="bgImg" id="bgImg">
//       <area shape="circle" coords="180,139,14" href ="table1.htmll" alt="" />
//       <area shape="circle" coords="129,161,10" href ="table2.html" alt="" />
//       <area shape="rect" coords="1820,0,1920,100" href ="table3.html" alt="" />
//    </map>

//     shape="circle" coords="x,y,r" 区域为圆形  后面是圆心坐标和以像素为单位的半径
//    shape="rect" coords="x1,y1,x2,y2" 区域为矩形  矩形的左上右下两点的坐标
//    shape="poly" coords="x1,y1,x2,y2,x3,y3....区域为多边形  多边形所有顶点的坐标
//       以上所有坐标都是相对于图形img左上脚坐标而言的



// ajax实现登录
// https://elm.cangdu.org/v2/login   //登录接口
// https://elm.cangdu.org/v1/user?user_id=74953  //用户信息
// https://elm.cangdu.org/v2/signout  //退出登录
// https://elm.cangdu.org/v1/captchas  //获取图片二维码
// 'username=lts&password=123456&captcha_code=8541'

// const xhr = new XMLHttpRequest()
// xhr.open('post','https://note-server.hunger-valley.com/auth/login')
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// xhr.onreadystatechange = ()=>{
//     if(xhr.readyState == 4&&xhr.status==200){
//         console.log(JSON.parse(xhr.responseText))
//         alert('登录成功')
//     }
// }
// xhr.send('username=lts&password=123456')





const request  = (url,method,data=null)=>{
return new Promise((resolve,reject)=>{
const xhr = new XMLHttpRequest()
// xhr.open(`${method}`,`https://elm.cangdu.org/v2${url}`)
xhr.open(`${method}`,url)

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(data)
xhr.onreadystatechange = ()=>{
    // if(readyState ==4 && status == 200){
        let res = JSON.parse(xhr.responseText)
        resolve(res)
        // console.log(xhr.responseText)
    // }
} 
}).catch(err=>{
    console.log(err)
})
}
const img = document.querySelector('.img')

// request('/captchas','post',null).then(res=>{
//     return new Promise((resolve)=>{
// img.src = res.code
//         resolve(res)
//     })
// }).then(res=>{
//     console.log(res)
// })

// request('/login','post','username=lts&password=123456&captcha_code=1650')

// request('/login','post',`username=lts&password=123456&captcha_code=4504`).then(res=>{
//     console.log(res)
// })

let getCode = document.querySelector('.getCode')
let login = document.querySelector('.login')
// console.log(getCode,login)

getCode.onclick = ()=>{
request('https://elm.cangdu.org/v1/captchas','post',null).then(res=>{
img.src = res.code
})  
}

// login.onclick=()=>{
// request('https://elm.cangdu.org/v2/login','post','username=lts&password=123456&captcha_code=8630').then(res=>{
//     console.log(res)
// })
// }

// 笔记登录成功
login.onclick=()=>{
request('https://note-server.hunger-valley.com/auth/login','post','username=lts&password=123456').then(res=>{
    console.log(res)
})
}

<div class="box">
<img src="" alt="" class="img">
<div style="margin-top:20px">
<button class="getCode">获取验证码</button>
<button class="login">登录</button>
</div>
</div>

 .box{
  width:300px;
  height:300px;
  background:green;
  /* margin:0 auto; */
  padding:10px;
  box-sizing: border-box;
  position: fixed;
  top: 10%;
  left: 30%;
  text-align: center
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */

}
.img{
    width: 50px;
    height: 50px;
    padding: 20px;
    border: 1px solid gray;
}