HTML+CSS+JavaScript做一个简约的浏览器主页_制作一个简易的网站主页,使用html css js-CSDN博客

本文链接：https://blog.csdn.net/qq_34162705/article/details/125473106

文章目录

前言
一、页面效果
二、实现方式
- 具体代码
总结

前言

感觉之前的浏览器主页乱七八糟，我个人比较喜欢简约卡通的。所以做了这个权游主题的简约版。整体代码也不难。最后是把写好的html文件地址作为浏览器首页地址，采用访问本地文件的方式更换主页。（有点小打小闹的感觉，有其他实现方式的大佬麻烦评论区留个言，嘻嘻嘻）

一、页面效果

刚打开的页面：在这里插入图片描述点击屏幕中间的阿多展开搜索框
请添加图片描述再次点击可以回到最初的状态

二、实现方式

采用最简单的HTML+CSS+原生的JavaScript

具体代码

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器主页</title>
    <link rel="stylesheet" href="../css/search.css">
</head>
<body>
<div id="main">
    <!--阿多-->
    <div id="duo" style="top: 200px;" class="logo1">
    </div>
    <!--搜索框-->
    <div id="searchBack" class="" style="-moz-transform: rotateX(90deg);">
        <input type="text" id="searchInput">
    </div>
</div>
</body>
<script src="../js/search.js"></script>
</html>

CSS文件：

*{
    margin: 0;
    padding: 0;
}

html,body{
    width: 100%;
    height: 100%;
}
#main{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../image/background.webp");

}

#duo{
    width: 400px;
    height: 200px;
    position: absolute;
    left: 560px;

}
.logo1{
    background: url("../image/logoup.png") no-repeat;
}
.logo2{
    left: 540px !important;
    background: url("../image/logodown.png") no-repeat;
}

#searchBack{
    width: 600px;
    height: 50px;
    background-color: #50b4bf;
    position: absolute;
    left: 460px;
    top: 260px;
    border-radius: 15px;
    box-shadow: 5px 5px 5px 1px #489da7;
}
#searchInput{
    width: 566px;
    height: 36px;
    margin: 5px 15px;
    font-size: 25px;
}
.revolveSearchOpen{
    animation-name: revolveOpen;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes revolveOpen {
    0%{-moz-transform: rotateX(90deg);}
    100%{-moz-transform: rotateX(0deg);}
}

.revolveSearchClose {
    animation-name: revolveClose;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes revolveClose {
    0%{-moz-transform: rotateX(0deg);}
    100%{-moz-transform: rotateX(90deg);}
}

JavaScript文件：

let duo = document.getElementById("duo");
let searchBack = document.getElementById("searchBack");
let timer = null;
let flag = true;
let flag2 = true;

duo.onclick = function () {
    moveDuo();
    revolve();
}
//阿多上下移动
function moveDuo() {
    //每次移动距离为4个px
    const each = 4;
    //top是移动了的距离
    let top = 0;
    clearInterval(timer);
    //这里用到了setInterval()方法
    timer = setInterval(function () {
        //打开状态
        if(flag){
            if(top >= 150){
                top = 0;
                flag = false;
                duo.classList.remove("logo1");
                duo.classList.add("logo2");
                clearInterval(timer);
            } else {
                top = top + each;
                duo.style.top = parseInt(duo.style.top.substr(0,duo.style.top.length-2)) - each + "px";
            }
        }
        //关闭状态
        else {
            if(top >= 150){
                top = 0;
                flag = true;
                duo.classList.remove("logo2");
                duo.classList.add("logo1");
                clearInterval(timer);
            } else {
                top = top + each;
                duo.style.top = parseInt(duo.style.top.substr(0,duo.style.top.length-2)) + each + "px";
            }
        }
    },30);
}
//搜索框旋转展开和闭合
function revolve() {
    if (flag2 == true){
        searchBack.style.display = "block";
        searchBack.classList.remove("revolveSearchClose");
        searchBack.classList.add("revolveSearchOpen");
        console.log(searchBack.classList);
        searchBack.style.transform = "rotateX(0deg)";
        flag2 = false;
    } else if(flag2 == false) {
        searchBack.classList.remove("revolveSearchOpen");
        searchBack.classList.add("revolveSearchClose");
        setTimeout(function () {
            searchBack.style.transform = "rotateX(90deg)";
        },2000);
        console.log(searchBack.classList);
        flag2 = true;
    }
}
//编辑回车事件
document.onkeydown = function (event) {
    let e = event || window.event;
    if (e && e.keyCode == 13){
       //插入搜索事件
        startSearch();
    }
}
function startSearch() {
    //这里我用到是必应，然后使用字符串拼接的方式
    let bingUrl = "https://cn.bing.com/search?pc=U528&q=";
    let searchInput = document.getElementById("searchInput").value;
    window.open(bingUrl + searchInput);
    //按下回车键之后清除输入框的内容
    document.getElementById("searchInput").value = "";
}