cnblog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="cnblog-css.css">
    <!--<bgsound src="七里香.mp4" loop="-1"></bgsound>-->
    <!--<bgsound></bgsound>-->
    <script type="text/javascript">

    var curIndex = 0;
    //时间间隔(单位毫秒)，每秒钟显示一张，数组共有3张图片放在img文件夹下。
    var timeInterval = 5000;

                            //定义一个存放照片位置的数组，可以放任意个，在这里放3个
    var arr = new Array();
    arr[0] = "avt2.jpeg";
    arr[1] = "avt3.jpg";
    arr[2] = "avt4.jpg";
    setInterval(changeImg, timeInterval);
    function changeImg() {

                                    //获得id名为d1的对象
    var obj = document.getElementById("avt");
    if (curIndex == arr.length - 1) {
    curIndex = 0;
    } else {
    curIndex += 1;
    }
                            //设置d1的背景图片
    obj.src = arr[curIndex];       //显示对应的图片
    }
    </script>
</head>
<body>
<!--<audio src="video.MP4" controls autoplay></audio>-->
<!--<EMBED src="七里香.mp4" width="500" height="500" border= 0 autostart= true loop= true ></EMBED>-->

<div class="blog-left">
    <div class="blog-avatar">
        <img src="avatar.jpg" alt="" id="avt">
    </div>
    <div class="blog-title">
        <p>Slk的个人博客</p>
    </div>
    <div class="blog-info">
        <p>这个人比Jason还帅，但是他什么都没有留下</p>
    </div>
    <div class="blog-link">
        <ul>
            <li><a href="http://localhost:63342/test/HTML/test2.html?_ijt=ljtorr18t2hihs3g8d03lsav6n">关于我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信公众号</a></li>
        </ul></div>
    <div class="blog-tag">
        <ul>
            <li><a href="">#Python</a></li>
            <li><a href="">#Java</a></li>
            <li><a href="">#Golang</a></li>
        </ul></div>
    <!--<div class="left-bot">-->
        <!--<img src="rose.jpeg" alt="" id="img1">-->
    <div>
        <audio id="player" controls autoplay>
            <source src="七里香.mp4" id="a1"></source>
        </audio>
        <script>
            document.getElementById('start').onclick = function(){
        player.play();
    }
    document.getElementById('stop').onclick = function(){
        player.pause();
    }
        </script>
        <!--<div style="width: 100%;text-align: center;"><span style="cursor: pointer;" id="start">开始</span></div>-->
        <!--<div style="width: 100%;text-align: center;"><span style="cursor: pointer;" id="stop">暂停</span></div>-->
    </div>
    </div>
</div>
<div class="blog-right">
    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019/11/16</span>
        </div>

        <div class="article-content">
            <a href="" id="check">查看详情</a>
            <p>重金求子 事成之后必有重谢：500w现金加上海大别野一套</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019/11/16</span>
        </div>
        <div class="article-content">
            <p>重金求子 事成之后必有重谢：500w现金加上海大别野一套</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019/11/16</span>
        </div>
        <div class="article-content">
            <p>重金求子 事成之后必有重谢：500w现金加上海大别野一套</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019/11/16</span>
        </div>
        <div class="article-content">
            <p>重金求子 事成之后必有重谢：500w现金加上海大别野一套</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019/11/16</span>
        </div>
        <div class="article-content">
            <p>重金求子 事成之后必有重谢：500w现金加上海大别野一套</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019/11/16</span>
        </div>
        <div class="article-content">
            <p>重金求子 事成之后必有重谢：500w现金加上海大别野一套</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019/11/16</span>
        </div>
        <div class="article-content">
            <p>重金求子 事成之后必有重谢：500w现金加上海大别野一套</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article-list">
        <div class="article-title">
            <span class="title">重金求子</span>
            <span class="date">2019/11/16</span>
        </div>
        <div class="article-content">
            <p>重金求子 事成之后必有重谢：500w现金加上海大别野一套</p>
        </div>
        <div class="article-bottom">
            <span>#Python</span>
            <span>#JavaScript</span>
        </div>
    </div>
</div>
</body>
</html>

/*仿博客园首页样式*/


/*通用样式*/
body {
    margin:0;
    background-color: #eeeeee;
}


a {    /*去除a标签下划线*/
    text-decoration: none;
}





ul {    /*去除列表前部标识和内填充*/
    list-style-type: none;
    padding-left: 0;
}


/*左侧样式*/

.left-bot {
    width: 100%;
    height: 800px;
    /*border:5px red solid;*/

}

#img1 {
    width: 100%;

}

.blog-left {
    float: left;
    width: 20%;
    height: 100%;
    background-color: #4e4e4e;
    position: fixed;
    top: 0;
    left: 0;
}


.blog-avatar {
    border: 5px solid white;
    border-radius: 50%;
    height: 130px;
    width: 130px;
    margin: 20px auto;
    overflow: hidden;
}

.blog-avatar img {
    width:100%;
    height: 100%;
    /*height:100%;*/
    /*margin:0 auto 20px*/
}


.blog-title, .blog-info {
    font-size: 14px;
    color: darkgray;
    text-align: center;
}

.blog-link a, .blog-tag a {
    color: black;
}

.blog-link a:hover, .blog-tag a:hover {
    color: gold;
}


.blog-link ul, .blog-tag ul {
    text-align: center;
    margin: 60px auto;
}




/*右侧样式*/
.blog-right {
    float: right;
    width: 80%;
    height: 100%;
}


.article-list {
    background-color: white;
    margin: 20px 40px 20px 10px;
    box-shadow: 5px 5px 5px rgba(129, 129, 129, 0.8);
}


.article-title {
    border-left: 5px solid red;
}


.article-title .title {
    font-size: 36px;
    margin-left: 18px;
}



.article-title .date {
    float: right;
    margin: 20px;
}



.article-content a {
    float: right;
    margin-right: 20px;
}

.article-content a:hover {

}

.article-content p {
    text-indent: 25px;  /*首行缩进*/
}


.article-bottom {
    border-top: 1px solid black;
}

.article-bottom {
    padding: 10px 20px;
}

日期

var d = new Date();
// console.log(d.toLocaleString());
var year = d.getFullYear()
var month = d.getMonth()
var day = d.getDate()
var hour = d.getHours()
var minute = d.getMinutes()
var week = d.getDay()


switch(week){
    case 0:
        week = '星期天';
        break;
    case 1:
        week = '星期一';
        break;
    case 2:
        week = '星期二';
        break;
    case 3:
        week = '星期三';
        break;
    case 4:
        week = '星期四';
        break;
    case 5:
        week = '星期五';
        break;
    case 6:
        week = '星期六';
        break;

}
console.log(year+'-'+month+'-'+day, hour+':'+minute, week)

day47work

cnblog

日期

猜你喜欢