个人介绍静态网页

我要开发同款
wLkpy2023年06月06日
191阅读

功能介绍

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}`

}
}

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论