random quote machine | 随机格言 | fcc项目

128 阅读 0 评论 85 点赞

我是靠谱客的博主微笑宝贝，最近开发中收集的这篇文章主要介绍random quote machine | 随机格言 | fcc项目，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机格言</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="quote-box">
        <div class="quote-text">
            <i class="fa fa-anchor"></i>
            <span id="text">abcd</span>
        </div>
        <div class="quote-author">
            - <span id="author">zhangsan</span>
        </div>
        <div class="buttons">
            <a class="button" id="tweet-quote" title="tweet this quote" target="_blank">
                <i class="fa fa-weixin"></i>
            </a>
            <a class="button" id="tumblr-quote" title="post this quote on weibo" target="_blank">
                <i class="fa fa-weibo"></i>
            </a>
            <button class="button" id="new-quote">新的格言</button>
        </div>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="./js/index.js"></script>

</html>

*{
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: baseline'
}
body{
    background-color: #333;
    color: #333;
    font-family: 'Raleway',sans-serif;
    font-weight: 400;
}
div{
    position: relative;
    z-index: 2;
}
.quote-box{
    width: 450px;
    padding: 40px 50px;
    margin: 8% auto auto auto;
    background-color: #fff;
    border-radius: 3px;
    display: table;
    position: relative;
}
.quote-box .quote-text{
    text-align: center;
    width: 450px;
    height: auto;
    clear: both;
    font-weight: 500;
    font-size: 1.75em;
}
.quote-box .quote-text i {
    font-size: 1.0em;
    margin-right: 0.4em;
}
.quote-box .quote-author{
    width: 450px;
    height: auto;
    clear: both;
    padding-top: 20px;
    font-size: 1em;
    text-align: right;
}
.quote-box .buttons{
    width: 450px;
    margin: auto;
    display: block;
}
.quote-box .buttons .button{
    height: 38px;
    border: none;
    border-radius: 3px;
    color: #fff;
    background-color: #333;
    outline: none;
    font-size: 0.85em;
    padding: 8px 18px 6px 18px;
    margin-top: 30px;
    opacity: 1;
    cursor: pointer;
}
.quote-box .buttons .button:hover {
    opacity: 0.9;
}
.quote-box .buttons .button#tweet-quote, .quote-box .buttons .button#tumblr-quote {
    float: left;
    padding: 0px;
    padding-top: 8px;
    text-align: center;
    font-size: 1.2em;
    margin-right: 5px;
    height: 30px;
    width: 40px;
}
.quote-box .buttons .button#new-quote {
    float: right;
}

接口使用的是一言网站

var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
var currentQuote = '', currentAuthor = '';

$(document).ready(function() {
    $('#new-quote').on('click',function () {
        getQuote();
    })

    function getQuote(){
        //获取格言
        $.getJSON("https://v1.hitokoto.cn/?encode=json",function(json){
            currentQuote = json["hitokoto"];
            currentAuthor = json["from"];
    
            //console.log(currentQuote+"_"+currentAuthor);

            // $('#text').text(currentQuote);
            // $('#author').html(currentAuthor);
            //文字淡入淡出效果
            $('.quote-text').animate({opacity: 0} , 300 , function() {
                $(this).animate({opacity: 1} , 300);
                $('#text').text(currentQuote);
            });
            $('.quote-author').animate({opacity: 0} , 300 , function() {
                $(this).animate({opacity: 1} , 300);
                $('#author').html(currentAuthor);
            });

            //背景颜色变换
            var num = Math.floor(Math.random() * colors.length);
            $("html body").animate({
                backgroundColor: colors[num],
                color: colors[num]
            }, 500 , function(){console.log(colors[num])});
            
            $(".button").animate({
                backgroundColor: colors[num]
            }, 500);
            
        })
    }
    
    getQuote();

    

});