DIY浏览器首页

置顶海上钓龟客

已于 2022-10-27 17:12:55 修改

阅读量553

点赞数

于 2022-09-17 23:02:31 首次发布

本文链接：https://blog.csdn.net/smkwxh/article/details/126912112

版权

javascript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

效果如下

每一个模块是可以点击的，地球背景是不停旋转的动态，在使用时将地址栏的地址设置为首页，在点击浏览器首页的时候就会调出此页面，可根据个人习惯进行修改，使用时可提高工作效率以及学习效率。

本人初学者，请大佬多多指教。 ∠(°ゝ°）敬礼

Html

<!DOCTYPE html>

<html lang="en">

<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="My home page.css">



</head>

<body>

<div class="box">

<div class="column">

<span class="learn">学习常用书签</span>

<span class="times"></span>

</div>



<div class="column-main">

<div class="card">

<a href="http://bufanui.com/" target="_blank">

<img src=" http://doc.bufanui.com/static/images/logo.jpg" alt="">

<span>不凡学院</span>

</a>

</div>



<div class="card">

<a href="http://doc.bufanui.com/" target="_blank">

<img src=" http://doc.bufanui.com/static/images/logo.jpg" alt="">

<span>前端文档</span>

</a>

</div>



<div class="card">

<a href="https://www.baidu.com/" target="_blank">

<img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt="" class="baiduyixia">

<span>百度一下</span>

</a>

</div>



<div class="card">

<a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh" target="_blank">

<img src=" https://fanyi-cdn.cdn.bcebos.com/static/trans-pc/static/media/logo.f7f354dc.svg" alt="">

<span>百度翻译</span>

</a>

</div>



<div class="card">

<a href="https://www.csdn.net/?spm=1000.2115.3001.4476" target="_blank">

<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="" class="csdon">

</a>

</div>



<div class="card">

<a href="https://www.runoob.com/php/php-tutorial.html" target="_blank">

<img src="https://www.runoob.com/wp-content/themes/runoob/assets/img/runoob-logo@2x.png" alt=""

class="php">

</a>

</div>



<div class="card">

<a href="https://gitee.com/" target="_blank">

<img src="https://next.gitee.com/_next/static/media/logo-white.a5b0e29c.svg" alt="">

<span>远程仓库</span>

</a>

</div>



<div class="card">

<a href="https://cubic-bezier.com/#.17,.67,.83,.67" target="_blank">

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fapi.fly63.com%2Fvue_blog%2Fpublic%2FUploads%2F20191023%2F5dafbf8e5ad48.jpg&refer=http%3A%2F%2Fapi.fly63.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666161596&t=867750d9c4463ed65d9654ff1ee9ce0a"

alt="">

<span>bezier</span>

</a>

</div>



<div class="card">

<a href="https://cn.vuejs.org/" target="_blank">

<img src="https://bkimg.cdn.bcebos.com/pic/b21bb051f8198618367a57502ca239738bd4b21c489d?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"

alt="">

<span>VUE.js</span>

</a>

</div>



<div class="card">

<a href="https://www.swiper.com.cn/" target="_blank">

<img src="https://cdn.learnku.com/uploads/images/202002/14/5342/sIAI7CaOit.png!large" alt="">

<span>Swiper</span>

</a>

</div>



<div class="card">

<a href="http://www.bufantec.com/" target="_blank">

<img src="http://www.bufantec.com/pages/tec/static/img/bd_logo.png" alt=""

class="php">

</a>

</div>



<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

</div>

<div class="column">

<span class="learn">娱乐常用书签</span>

</div>

<div class="column-main">



<div class="card">

<a href="https://www.bilibili.com/" target="_blank">

<img src="图标文件/哔哩哔哩图标.png" alt="">

<span>哔哩哔哩</span>

</a>

</div>



<div class="card">

<a href="https://www.zhihu.com/" target="_blank">

<img src="https://static.zhihu.com/heifetz/assets/logo.804f083e.png" alt="">

<span>知乎</span>

</a>

</div>



<div class="card">

<a href="https://www.douyin.com/?enter=guide" target="_blank">

<img src="https://bkimg.cdn.bcebos.com/pic/80cb39dbb6fd5266d0168896e952802bd40735fa9855?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg"

alt="">

<span>抖音</span>

</a>

</div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

</div>

<div class="column">

<span class="learn">办公常用书签</span>

<span class="yiyan">海上钓龟客</span>

</div>

<div class="column-main">



<div class="card">

<a href="https://mail.qq.com/" target="_blank">

<img src="../我的浏览器首页/图标文件/qqmail_logo.png" alt="" class="qqemail">

</a>

</div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

</div>

</div>

<script src="My home page.js"></script>

<video autoplay="autoplay" loop="loop" muted="">

<source src="SJ04.mp4" type="video/mp4">

</video>

</body>

</html>

Css样式

@font-face {

font-family: "赵九江钢笔行书字体";

src: url(书体坊赵九江钢笔行书字体.ttf);

}

.box {

width: 1150px;

height: 600px;

border-radius: 5px;

margin: 0 auto;

padding: 0px 10px 10px 10px;

}

video {

position: absolute;

top: 0;

left: 0;

z-index: -100;

width: 100%;

}

.box .column {

width: 1130px;

height: 50px;

box-sizing: border-box;

line-height: 50px;

padding: 0px 20px 0px 20px;

border-radius: 10px;

margin: 10px auto 10px;

font-family: 赵九江钢笔行书字体;

transition: 0.4s;

font-size: 30px;

border: 1px solid #CDC8D7;

box-sizing: border-box;

color: white;

display: flex;

justify-content: space-between;

}

.column:hover {

box-shadow: 1px 1px 5px 5px #CDC8D7;

transform: scale(1.04);

}

.column-main {

display: flex;

width: 1130px;

margin: 10px auto 0;

flex-wrap: wrap;

justify-content: space-between;

align-items: flex-start;

}

.box .column-main:nth-child(2) {

height: 180px;

}

.box .column-main:nth-child(4) {

height: 90px;

display: flex;

justify-content: space-around;

}

.box .column-main:nth-child(6) {

height: 90px;

}

.column-main .card:nth-last-child(-n+5) {

height: 0;

margin-bottom: 0;

overflow: hidden;

border: 0px;

}

.card {

width: 180px;

height: 80px;

border-radius: 10px;

/* background-color: orange; */

/* opacity: 0.5; */

position: relative;

transition: 0.4s;

border: 1px solid #CDC8D7;

box-sizing: border-box;

color: white;

}

.card:hover {

box-shadow: 1px 1px 5px 5px #CDC8D7;

transform: scale(1.04);

}

.card a {

text-decoration: none;

}

.card img {

width: 50px;

height: 50px;

border-radius: 10px;

margin: 15px 0px 0px 15px;

/* vertical-align: middle; */

}

.card span {

font-size: 20px;

color: white;

font-family: "赵九江钢笔行书字体";

position: absolute;

top: 28px;

left: 80px;

}

.card .baiduyixia {

width: 50px;

height: 25px;

border-radius: 0px;

margin: 24px 0px 0px 15px;

}

.card .baidu {

width: 150px;

height: 50px;

border-radius: 0px;

margin: 15px 0px 0px 15px;

}

.card .csdon {

width: 150px;

height: 69px;

border-radius: 0px;

margin: 15px 0px 0px 15px;

}

.card .php {

width: 150px;

height: 51px;

border-radius: 0px;

margin: 15px 0px 0px 15px;

}

.card .qqemail {

width: 150px;

height: 31px;

border-radius: 0px;

margin: 26px 0px 0px 15px;

}

.tool {

width: 180px;

height: 80px;

border-radius: 10px;

margin: 10px 0px 0px 10px;

background-color: orange;

text-align: center;

line-height: 80px;

font-size: 30px;

float: left;

transition: 0.5s;

font-size: 20px;

color: white;

font-family: 赵九江钢笔行书字体;

}

.tool:hover {

box-shadow: 1px 1px 5px 5px olivedrab;

transform: scale(1.04);

}

.tool-item {

display: none;

position: absolute;

z-index: 500;

}

.tool-item p {

width: 178px;

height: 48px;

border: 1px solid black;

border-radius: 10px;

margin: 0 auto;

margin-top: 2px;

background-color: white;

text-align: center;

line-height: 50px;

}

.tool-item a {

font-size: 25px;

text-decoration: none;

}

.tool:hover .tool-item {

display: block;

}

.times {

font-size: 18px;

}

.yiyan{

font-size: 18px;

}

JavaScript

// 时间Js代码

console.log(getNowTime());

//获取当前时间

function getNowTime() {

var date = new Date();

//年 getFullYear()：四位数字返回年份

var year = date.getFullYear(); //getFullYear()代替getYear()

//月 getMonth()：0 ~ 11

var month = date.getMonth() + 1;

//日 getDate()：(1 ~ 31)

var day = date.getDate();

//时 getHours()：(0 ~ 23)

var hour = date.getHours();

//分 getMinutes()： (0 ~ 59)

var minute = date.getMinutes();

//秒 getSeconds()：(0 ~ 59)

var second = date.getSeconds();

var time = '当前时间是：' + year + '-' + addZero(month) + '-' + addZero(day) + ' ' + addZero(hour) + ':' + addZero(minute) + ':' + addZero(second);

return time;

}

//小于10的拼接上0字符串

function addZero(s) {

return s < 10 ? ('0' + s) : s;

}

// 让时间每秒刷新一次

var times = setInterval(function () {

var times = document.querySelector('.times');

times.innerText = getNowTime();

}, 1000);

// 一言

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

var res = JSON.parse(xhr.response);

document.querySelector('.yiyan').innerHTML = res.hitokoto;

}

}

xhr.open('GET', 'https://v1.hitokoto.cn?c=d')

xhr.send(null)