乐趣区

关于javascript:致青春一键上线你们专属的云上毕业纪念册

jiezi

简介：毕业不说再见，青春不散场！在云端，在一起！在问答 https://developer.aliyun.com/… 的留言区域晒出本人「线上环境」部署的毕业纪念册，在 6 月 30 号 18 点之前点赞数前 10 能够取得咱们送出的毕业大礼包，阿里云的公仔盲盒一个以及 10 元的代金券一张，让你的青春永远在线！

毕业不说再见，青春不散场

经验了动荡的 2020 年，让 2021 年的同学时光显得分外珍惜。早上的起床号依然会响起，食堂的阿姨照常筹备早餐，门口的大爷照例查看着证件和衰弱码，三年在一起曾经 980 天 18 个小时 51 分 59 秒。然而又是一年毕业季，疫情影响了你们开学的工夫，却没有影响到你们毕业，少了隆重的毕业典礼，然而一起走过的青春不会遗记。

毕业是千百万集体，千百万个夏天的故事，咱们有千百万个理由让你的毕业更加特地一点。阿里云云开发平台的用户安南同学定制了他的专属毕业纪念册，他将他的纪念册奉献给大家，让所有的毕业生都能够疾速领有本人的云上毕业纪念册，通过阿里云云开发平台一键上线。不论你是 IT 大拿、还是建站小白，都能够分分钟获取本人专属的也毕业纪念册。毕业不说再见，青春不散场！

毕业纪念册效果图

毕业纪念册的上线步骤

1. 创立利用

a. 登陆云开发平台

登录云开发平台。关上网址 https://workbench.aliyun.com/，应用阿里云账号登录，依照提醒创立团队，点击批准协定。没有阿里云账号的用户，在登录页面注册后进行登录即可。为了保障最好的应用体验，请应用 Chrome 浏览器。

b. 创立利用

关上疾速开始 https://workbench.aliyun.com/page/quickstart，点击创立新利用。

c. 云资源拜访受权。

云资源拜访受权。如果您之前没有应用过云开发平台，会呈现云资源受权治理的选项，往下拉呈现直至批准受权的字样，点击「批准受权」后呈现受权胜利，点击进入「下一步」。

d. 抉择语言和计算服务。

别离抉择开发语言 NodeJS，创立形式抉择间接创立，而后点击下一步。而后填写利用的名称和介绍，抉择所属产品线（按须要抉择），计算服务抉择 FC。而后点击实现，云服务如果没有开明须要开明一下，开明不免费。

2. 配置和上线利用。

a. 下载毕业纪念册的代码。

拜访 https://github.com/cloudworkbench/memory-album 下载源代码后解压缩到本地目录。

b. 创立环境

利用创立胜利后会跳转到利用详情页面，点击日常环境的「部署配置」，顺次抉择【主动创立环境】-【抉择任意可用区】-【主动创立交换机】

c. 在线开发部署

环境配置实现后，实现后回到如下页面，点击在线开发部署，在新的窗口关上 WebIDE 部署, 点击「在线开发部署」，关上 CloudIDE 上传代码文件。

d. 上传代码文件

CloudIDE 加载实现后，选中下载后解压好的文件，将源码文件间接拖拽到 CloudIDE 的根目录，上传实现后记得保留并且推送。

e. 一键上线毕业纪念册

点击 CloudIDE 左侧的部署 Tab，抉择日常环境，点击立刻部署，在弹出框中确认配置后持续部署。部署实现后产生长期域名，即可拜访好部署的站点。快点给同学们分享一下吧，长期域名 30 分钟有效期。

f. 绑定线上域名

生产的长期域名是云开发平台收费提供的，有效期只有 30 分钟，过期之后须要手动刷新才能够失效。如果想保留作为长期的毕业站点应用，能够绑定本人的域名，当初很多域名 1 块钱首年。

在你购买的域名控制台，配置 CNAME 映射到该域名，下图以阿里云的域名控制台为例。如果你是新购的域名还没有备案的话，在云开发平台创立一个 region 在香港的产品也能够立刻应用。

在云开发平台的利用详情页面点击线上环境的「域名配置」，绑定配置好的域名，并且依照日常环境的配置进行「环境配置」，保留后关上「在线开发部署」进行一键部署即可应用本人的域名进行拜访。

毕业纪念册可定制的性能

1. 背景图更换

在 index.html 中更改 url 的门路 images/classroom.png，或者替换文件夹里 classroom.png 文件

body {
        perspective: 1000px;
        display: block;
        padding:0;
        margin:0;
        overflow:hidden;
        background-image:url("images/classroom.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;

樱花透明度

在 index.html 中更改 opacity 0~1 之间的数字,1 是齐全清晰 0 是隐形

/* 樱花透明度 */
    canvas {
        padding:0;
        margin:0;
        opacity:0.3;

在一起计时

在 js/time.js 下输出退学年份就能够算进去在一起的工夫

var arr = "2018-10-1 21:00:00".split(/[- :]/);// 改这里
var box = document.getElementsByClassName('textCon')[0];

黑白上毕业留念的话

在 js/typing.js 中批改 str 的内容以及显示的速度, 也就是到时候黑板上显示的内容，字体大小 / 色彩 / 地位能够在 css 中调整

let divTyping = document.getElementById('text')//div
let i = 0,// 初始化
    timer = 0,
    str = '山无棱, 天地合, 才敢与君绝'// 要显示的字
function typing () {if (i <= str.length) {divTyping.innerHTML = str.slice(0, i++) + '_'// 当字没显示完的时候, 从字符串上切下来下来
        timer = setTimeout(typing, 450)// 每次的距离
    }

旋转相册

在 css/xuanzhuan.css 中，自定义图片, 图片大小 以及 旋转相册地位，能够替换掉 image 文件夹里的图片。

.xuanzhuan {
    width:200px;
    height:200px;
    margin: 100px auto;
    background: url("../images/xuanzhuan/shu.jpg") no-repeat;
    background-size: cover;
    transform-style: preserve-3d;
    position: absolute;
    transition: 15s linear;
    top: 50%;
    left: 42%;
    z-index: initial;
}
.xuanzhuan:hover{transform: rotateY(360deg);
}
.xuanzhuan div{
    height:150px;
    width: 200px;
    position: absolute;
    background-size: cover;
    background: no-repeat;
}
.xuanzhuan div:nth-child(1){ /*0,0,2,1*/
    background: url("../images/xuanzhuan/1.jpg");
    background-size: cover;
    transform:rotateY(0deg) translateZ(400px);
}
.xuanzhuan div:nth-child(2){background: url("../images/xuanzhuan/2.jpg");
    background-size: cover;
    transform:rotateY(60deg) translateZ(400px);
}
.xuanzhuan div:nth-child(3){background: url("../images/xuanzhuan/3.jpg");
    background-size: cover;
    transform:rotateY(120deg) translateZ(400px);
}
.xuanzhuan div:nth-child(4){background: url("../images/xuanzhuan/4.jpg");
    background-size: cover;
    transform:rotateY(180deg) translateZ(400px);
}
.xuanzhuan div:nth-child(5){background: url("../images/xuanzhuan/5.jpg");
    background-size: cover;
    transform:rotateY(240deg) translateZ(300px);
}
.xuanzhuan div:nth-child(6){background: url("../images/xuanzhuan/6.jpg");
    background-size: cover;
    transform:rotateY(300deg) translateZ(300px);
}

BGM 音乐

这里采纳的是外链引入音乐的形式，你也能够用本人本地的音乐文件，那样关上更快，只有放到我的项目根门路下间接援用就行。学生成外链，而后在 index.html 中引入，在 index.html 下的 audio 标签的里的 source 标签的 src 属性中粘贴链接。

<!-- 音乐 -->
<audio controls class="music">
    <source class="music_a" src="http://m10.music.music/2021060508530538.mp3" type="audio/mpeg">
</audio>

在云端，在一起！支付毕业大礼包

毕业不说再见，青春不散场！在云端，在一起！

点击拜访问答 https://developer.aliyun.com/ask/321737 的留言区域晒出本人 「线上环境」 部署的毕业纪念册（包含网址和截图）能够取得 10 元的代金券一张，在 6 月 30 号 18 点 之前 点赞数前 10 的留言将取得 咱们送出的毕业大礼包，阿里云的公仔盲盒一个，让你的青春永远在线！

版权申明：本文内容由阿里云实名注册用户自发奉献，版权归原作者所有，阿里云开发者社区不领有其著作权，亦不承当相应法律责任。具体规定请查看《阿里云开发者社区用户服务协定》和《阿里云开发者社区知识产权爱护指引》。如果您发现本社区中有涉嫌剽窃的内容，填写侵权投诉表单进行举报，一经查实，本社区将立即删除涉嫌侵权内容。

退出移动版