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

最新推荐文章于 2023-09-13 15:28:07 发布

towrabbit

最新推荐文章于 2023-09-13 15:28:07 发布

阅读量809

点赞数 3

分类专栏：前端文章标签： freeCodeCamp 随机句子 canvas渐变动画

本文链接：https://blog.csdn.net/towrabbit/article/details/80055027

版权

前端专栏收录该内容

37 篇文章 2 订阅

订阅专栏

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

功能#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);
}

然后就ok效果：
手机效果图
emm正好出现的是我最喜欢的名言哈哈

towrabbit

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【freeCodeCamp】 random quote machine 随机格言显示器 json调用

喵的，这个随机格言显示器用了我好长的时间，因为不想做的那么简单，怎么也要酷炫一点对不对。然后在改了一个星空插件的基础上做出了这玩意星之语做这个需要完成完成：功能#1: 点击一个按钮就生存一个新的随机引用短语。功能#1: 点击一个按钮就把这个引用短语发到twitter中。其实就这两点来说还是比较简单的，第一个是对于在freeCodeCamp前面知识的综合复习第二个是对于分享...
复制链接

扫一扫