60%为鼠标悬浮显示
/* 鼠标悬停阴影效果 */
.works-pic>li:hover {
    /* 小手标 */
    cursor: pointer;
    /* 开启盒子阴影效果 */
    box-shadow: 2px 10px 15px #333;
}
40%为Ajax链接显示
        // 创建ajax实例  
        let xhr = new XMLHttpRequest();
        // 创建请求  (挂请求信息 内容等)
        xhr.open('GET','https://dog.ceo/api/breeds/image/random');
        // 发送请求
        xhr.send()
 
        let pic =document.querySelector('#pic')
 
        //响应请求  
        xhr.onload = function(){
            // 判断一下  你请求服务器的状态码是否 200   200状态码表示成功   
            if(xhr.status === 200){
                // 打印服务器回馈给我的信息   拿到是一个json格式   
                // console.log(xhr.response);
 
                // 需要在js中使用json格式 需要转换一下  用反序列化变为 对象 
                let  date = JSON.parse(xhr.response);
                // date来接收一下对象
                console.log(date);
 
                // 拿到这个随机图片的地址 
                console.log(date.message);
 
 
                // 拿到随机图片地址  插入到我的img标签的src属性  
                pic.src=`${date.message}`
 
            }
        }
点击空白处退出提示














评论