ajax网页切换背景图

longjunx

已于 2023-09-17 21:37:12 修改

阅读量148

点赞数

CC 4.0 BY-SA版权

文章标签： ajax 前端 javascript

于 2023-09-17 21:08:17 首次发布

本文链接：https://blog.youkuaiyun.com/longjunx/article/details/132953763

	<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网站-更换背景</title> <!-- 初始化样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"> <!-- 核心样式 --> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="container"> <div class="nav"> <div class="left"> <ul> <li><a href="#" target="_blank" rel="nofollow">免费教程</a></li> <li><a href="#" target="_blank" rel="nofollow">原创书籍</a></li> <li><a href="#" target="_blank" rel="nofollow">教研团队</a></li> <li><a href="#" target="_blank" rel="nofollow">校区汇总</a></li> <li><a href="#" target="_blank" rel="nofollow">报名流程</a></li> <li><a href="#" target="_blank" rel="nofollow">项目信息站</a></li> <li><a href="#" target="_blank" rel="nofollow">技术社区</a></li> </ul> </div> <div class="right"> <label for="bg">更换背景</label> <input class="bg-ipt" type="file" id="bg"> </div> </div> <div class="search-container"> <img src="https://www.itheima.com/images/logo.png" alt=""> <div class="search-box"> <input type="text"> <button>搜索一下</button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- 核心代码 --> <script src="./js/index.js"></script> </body> </html>



html, body { height: 100%; font-size: 14px; } .nav { height: 60px; background: rgba(0, 0, 0, 0.2); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .nav ul { display: flex; } .nav ul li { margin-right: 10px; cursor: pointer; } .nav ul li a { color: white; text-decoration: none; } .nav .right label { background: #edf2f5; padding: 5px 10px; border-radius: 10px; font-size: 12px; cursor: pointer; } .nav .right input { display: none; } .search-container { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .search-container .search-box { display: flex; } .search-container img { margin-bottom: 30px; } .search-container .search-box input { width: 512px; height: 16px; padding: 12px 16px; font-size: 16px; margin: 0; vertical-align: top; outline: 0; box-shadow: none; border-radius: 10px 0 0 10px; border: 2px solid #c4c7ce; background: #fff; color: #222; overflow: hidden; box-sizing: content-box; -webkit-tap-highlight-color: transparent; } .search-container .search-box button { cursor: pointer; width: 112px; height: 44px; line-height: 41px; line-height: 42px; background-color: #ad2a27; border-radius: 0 10px 10px 0; font-size: 17px; box-shadow: none; font-weight: 400; border: 0; outline: 0; letter-spacing: normal; color: white; } body { background: no-repeat center /cover; background-color: #edf0f5; }

	/** * 目标：网站-更换背景 * 1. 选择图片上传，设置body背景 * 2. 上传成功时，"保存"图片url网址 * 3. 网页运行后，"获取"url网址使用 * */ document.querySelector('.bg-ipt').addEventListener('change', e => { // 1. 选择图片上传，设置body背景 console.log(e.target.files[0]) const fd = new FormData() fd.append('img', e.target.files[0]) axios({ url: 'http://hmajax.itheima.net/api/uploadimg', method: 'POST', data: fd }).then(result => { const imgUrl = result.data.data.url document.body.style.backgroundImage = `url(${imgUrl})` // 2. 上传成功时，"保存"图片url网址 localStorage.setItem('bgImg', imgUrl) }) }) // 3. 网页运行后，"获取"url网址使用 const bgUrl = localStorage.getItem('bgImg') console.log(bgUrl) bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)