Meow, this random motto display took me a long time, because I don't want to make it so simple, how can it be cool, right? Then I made this thing on the basis of changing a
starry
To do this, it needs to be completed:
- Feature #1: Live a new random quote phrase with the click of a button.
- Feature #1: Click a button to tweet this quote phrase.
In fact, it is relatively simple in terms of these two points. The first is a comprehensive review of the previous knowledge of freeCodeCamp. The
second is the use of the sharing interface. At the same time, this project also involves the call of json.
I have: one Canvas plug-in for starry sky:
starry sky
is used to draw a rotatable starry sky. I
originally wanted to use this as a background, but the effect is still not interactive, so I hope to
increase the condition (+1): in the middle of the page When the text changes, the background stars can also change color at the same time. The specific ideas of the
process :
1. Obtain the json file from the server, which contains many mottos
2. When the switch button is clicked, hide the original motto, replace the motto, and then display it again come out. The colors in this one are also random.
An array of colors, in short, the color of the background stars that corresponds to the font glow.
Aphorism array, many aphorisms, and can be expanded infinitely, including information is the content and source of the aphorisms
Then I want to paste the code directly, the
html code:
<!--底色星空-->
<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>Then add a cute style that matches the atmosphere (compatible with mobile terminals):
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);
}The first step is to determine the jquery
js in front of the whole process:
//恶趣味，如果获取不了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:
//生成特定范围内的随机整数
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);
}Then the ok effect:
emm happens to be my favorite quote haha