【freeCodeCamp】 random quote machine 随机格言显示器 json调用

93 阅读 0 评论 62 点赞

我是靠谱客的博主自信烤鸡，最近开发中收集的这篇文章主要介绍【freeCodeCamp】 random quote machine 随机格言显示器 json调用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

喵的，这个随机格言显示器用了我好长的时间，因为不想做的那么简单，怎么也要酷炫一点对不对。然后在改了一个星空插件的基础上做出了这玩意
星之语
做这个需要完成完成：

功能#1: 点击一个按钮就生存一个新的随机引用短语。
功能#1: 点击一个按钮就把这个引用短语发到twitter中。

其实就这两点来说还是比较简单的，第一个是对于在freeCodeCamp前面知识的综合复习
第二个是对于分享接口的使用，同时这个项目还涉及到json的调用
我手头有的有：一个星空的canvas插件：
星空
用于绘制一个可以旋转的星空
本来是想单纯把这个当背景用，但是这样的话效果感觉还是没有互动性，所以我希望的是
增加条件（+1）：在页面中间的文字发生变化的时候背景星星也能够同时变颜色
流程的具体思路：
1.从服务器获取json文件，里面有很多格言
2.当点击切换按钮的时候，将原来的格言隐藏，更换格言，然后再显示出来。这个其中的颜色也是随机的。
颜色数组，总之希望是和字体发光所对应的背景星星的颜色。
格言数组，很多格言，而且可以无限扩大，包括信息是格言的内容以及来源
然后我就想直接贴代码了，
html代码：

<!--底色星空-->
<canvas id="canvas" width="1134" height="974"></canvas>
<!--显示格言的中心块-->
<div class="displayWindow">
    <div id="message">
        <div class="word"></div>
        <div class="from">—— <span id="from"></span></div>
    </div>
    <button class="change">切换</button>
</div>
<!--copyright-->
<div class="copyright">
    by towrabbit
</div>
<!--tweet分享接口-->
<a id="tweet" href="https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=">
    <div class="tweet">tweet share</div>
</a>

然后加上可爱的符合气氛的样式（兼容移动端）：

html{
    font-size:100px;
}
body{
    font-size:16px;
}
/*初始化margin和padding以便于不同浏览器兼容*/
*{
    margin:0;padding:0;box-sizing:border-box;
}
@media only screen and (max-device-width: 319px){
    html{
        font-size:45px;
    }
}
@media only screen and ( min-device-width:320px ) and ( max-device-width: 359px ){
    html{
        font-size:50px;
    }
}
@media only screen and ( min-device-width:360px ) and (max-device-width: 374px ){
    html{
        font-size:56.25px;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 413px){
    html{
        font-size:58.6px;
    }
}
@media only screen and (min-device-width : 414px) and (max-device-width : 736px){
    html{
        font-size:64.68px;
    }
}
body {
  background: #060e1b;
  overflow: hidden;
}
#ChartCanvas{
    background:rgba(255,255,255,0.05);
    position:absolute;
    z-index:1;
    top:0px;
    left:0px;
}
.displayWindow{
    position:fixed;
    width:5rem;
    max-width:640px;
    border-radius:.2rem;
    /*background-color: rgba(100,100,255,0.3);*/
    left:50%;
    top:30%;
    margin-left:-2.5rem;
    text-align:center;
}
#message{
    opacity:0;
    width:5rem;
    max-width:100%;
    border-radius:.2rem;
    /*background-color: rgba(100,100,255,0.3);*/
}
#message .word{
    font-size:.4rem;
    color:rgba(200,200,255,0.9);
    margin:.2rem auto;
    text-align:center;
    text-shadow:0 0 0.2rem rgba(200,200,200,0.8);
    padding:.1rem;
}
#message .from{
    padding:.1rem;
    color:rgba(200,200,255,0.9);
    width:100%;
    font-size:.3rem;
    text-align:right;
    text-shadow:0 0 0.1rem rgba(222,222,222,0.9);
}
.copyright{
    font-size:.2rem;
    position:fixed;
    bottom:5%;
    left:50%;
    width:4rem;
    margin-left:-2rem;
    color:rgba(100,100,255,0.9);
    text-align:center;
}
.change{
    transition:all .3s; 
    position:absolute;
    bottom:-.8rem;right:.3rem;
    font-size:.28rem;
    color:rgba(222,222,255,0.9);
    width:1.2rem;height:.5rem;
    line-height:.5rem;
    border:0.01rem solid rgba(150,150,255,0.8);
    background-color: rgba(50,50,255,0.2);
}
.change:hover{
    cursor:pointer;
    box-shadow:0 0 .1rem .05rem rgba(50,50,255,0.2);
    background-color: rgba(100,100,255,0.2);
}
.change:active{
    border:0.01rem solid rgba(200,200,255,0.8);
}
.tweet{
    font-size:.2rem;
    position:fixed;
    bottom:5%;
    left:25%;
    width:1.4rem;
    margin-left:-1rem;
    color:rgba(255,100,255,0.9);
    text-align:center;
    border:0.02rem solid rgba(255,100,255,0.8);
}

首先第一步就是要确定整个流程前置jquery
js:

//恶趣味，如果获取不了json的话会出现这个，同时也是初始化名言的数组
    var metoArray = [
    {
        "id":"-1",
        "word":"你无法获取数据真的很可怜",
        "by":"towrabbit"
    }
    ];//储存获取的json数据用
    /*当前显示的名言*/var currentMeto = "",/*当前的名言来源*/currentAuthor="";
$(document).ready(function() {
        //获取json
        $.getJSON("meto.json", function(data) {
            metoArray = data;
            //获取随机的索引
            var randomIndex = randomNum(0,(metoArray.length - 1));
            //随机的一个名言对象
            var currentdata = data[randomIndex];
            //引用
            currentMeto = currentdata.word;
            currentAuthor = currentdata.by;
            //渐变进入显示名言
            fadeinMessage(currentdata);
            //更改推特的接口
            changeShare(currentMeto,currentAuthor);
        });
        //添加切换按钮事件
        $(".change").click(function(){
            //这个方法用于在颜色数组中选取一个颜色渐变，并且把目标颜色存入color这个变量中用于变化在中间显示名言的字
            var color = animateColors(colors);
            //渐变目前的名言并且存储这个名言对象 包括内容以及作者（来源）
            var currentdata = randomChangeMeto(metoArray,color);
            //改变推特的接口
            changeShare(currentdata.word,currentdata.by);
        });
    });

函数：

//生成特定范围内的随机整数
function randomNum(min,max){
    var num = Math.floor(Math.random()*(max+1-min) + min);
    return num;
}
//用于改变星空中每个星星的canvasn绘制 本来是hsla的取色器 我改成rgba了 这个熟悉一些
function changeColorOfCanvas2(colorR,colorG,colorB){//传入红绿蓝三个颜色
    //hue = color || 0;
    ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
    gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);//中心渐变
    gradient2.addColorStop(0.025, '#fff');
    gradient2.addColorStop(0.1, 'rgba(' + colorR + ','+colorG+', '+colorB+',0.9)');
    gradient2.addColorStop(0.25, 'rgba(' + colorR + ', '+colorG+','+colorB+',0.05)');
    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();
}
//创建改变星星颜色的动画 每秒30帧 输入目标颜色
var currentColor = {
    "r":33,"g":73,"b":136
};//目前的颜色引用
function animateColor(targetColor){
    var colorR = (targetColor.r - currentColor.r)/30;
    var colorG = (targetColor.g - currentColor.g)/30;
    var colorB = (targetColor.b - currentColor.b)/30;

    for(var i = 1;i <= 30 ; i ++ ){
        var colorstep = {
            "r":Math.floor(currentColor.r + colorR*i),
            "g":Math.floor(currentColor.g + colorG*i),
            "b":Math.floor(currentColor.b + colorB*i)
        };
        setTimeout("changeColorOfCanvas2("+colorstep.r+","+colorstep.g+","+colorstep.b+")",i*(1000/30));
    }
    currentColor = targetColor;
}

//颜色列表
var colors = [
    {"r":150,"g":0,"b":0},
    {"r":0,"g":200,"b":0},
    {"r":0,"g":200,"b":200},
    {"r":200,"g":0,"b":200},
    {"r":233,"g":100,"b":30},
    {"r":233,"g":233,"b":50},
    {"r":200,"g":220,"b":200},
    {"r":250,"g":220,"b":220},
    {"r":200,"g":200,"b":10},
    {"r":100,"g":255,"b":255},
    {"r":120,"g":230,"b":40},
    {"r":127,"g":255,"b":0},
    {"r":255,"g":100,"b":60},
    {"r":160,"g":230,"b":240},
    {"r":255,"g":52,"b":179},
    {"r":40,"g":40,"b":220},
    {"r":255,"g":40,"b":230},
    {"r":255,"g":160,"b":200},
    {"r":255,"g":20,"b":250},
]
//在颜色数组中选择随机的颜色进行变换
function animateColors(colors){
    var randomindex = randomNum(0,colors.length-1);
    var randomColor = colors[randomindex];
    animateColor(randomColor);
    return randomColor;
}

//改变名言颜色以及内容
    function changeWord(dataObj,color){
        //让当前的字渐渐消失 让新的字出现
        $("#message").animate({
            opacity:0,
        },800,
            function(){
                $(this).animate({
                    opacity:1,
                },800);
                $("#message .word").text(dataObj.word);
                $("#message .word").css("text-shadow","0 0 0.1rem rgba("+color.r+","+color.g+","+color.b+",0.8)");
                $("#from").text(dataObj.by);
                $(".from").css("text-shadow","0 0 0.1rem rgba("+color.r+","+color.g+","+color.b+",0.8)");
            }
        );
    };
/*页面打开的时候渐渐出现*/
function fadeinMessage(dataObj){
    console.log("yes");
    $("#message").css({"opacity":0});
    $("#message").animate({
                        opacity:1
                    },1000);
    $("#message .word").text(dataObj.word);
    $("#from").text(dataObj.by);
}