我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛
我有一个粽子,想送给在座的掘友,它的主料是牵挂,配方是想念,生产日期是认识你的每一天,保质期是永远,味道是开心快乐,粽子已搭上火箭🚀准备发送给各位respect~网页前端H5,先看一下成品叭🙋
在线预览😻
思路,三个3️⃣页面+🎵音乐伴随
1、拆开信封💌的页面
2、字体🔤弹出页面
3、祝福🥳粽子页面
不说了➡️开整👨🔧
先是去 图片素材网 找了一些免费使用无侵权的端午节图标
然后选择在vs code里面新建一个端午节salute指南文件夹,里面创建一个二级文件夹 static文件夹
在static文件夹里面四个文件夹,分别命名为css,js,picture,images
将信封素材+背景动态GIF放置于文件夹images里面,并且重命名如下:
其次是将音乐png图标🎵放置于picture文件夹内,如下:
下面先来写前端HTML文件:
<head>
<meta charset="UTF-8">
<title>端午节安康❤️</title>
<script>
//判断客户端设备，选择写入meta
function init_viewport(){
if(navigator.userAgent.indexOf('Android') != -1){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;
var phoneScale = parseInt(width)/500;
document.write('<meta name="viewport" content="width=500, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">');
}
}else if(navigator.userAgent.indexOf('iPhone') != -1){
var phoneScale = parseInt(window.screen.width)/500;
document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale +', maximum-scale='+phoneScale+', user-scalable=0" /> '); //0.75 0.82
}else{
document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '); //0.75 0.82
}
}
init_viewport();
</script><meta name="viewport" content="width=500, height=750, initial-scale=0.64">
<style>
* {
padding: 0px;
margin: 0px;
-webkit-box-sizing: border-box;
}
body {
background-color: white;
}
a {
color: white;
text-decoration: none;
}
#div_container { /*最外层div，用于居中兼容PC和移动*/
width: 500px;
margin: 0px auto;
position: relative;
/*background-color: #FAFAFA;*/
font-size: 1em;
}
.div_simple_page { /*文字部分的最外层，用于定位*/
position: relative;
display: none;
}
.div_s_page_bg { /*背景设置在这里*/
background-repeat: repeat;
background-size: 100%;
background-attachment: fixed;
width: 500px;
min-height: 1200px;
}
.div_s_page_height {
visibility: hidden;
padding: 30px;
text-align: justify; /*为了使文字两端对齐 */
white-space:pre-wrap; /*保留换行效果*/
color: silver;
}
.div_s_page_zx {
position: absolute;
left: 0;
right: 0; /*4个方向定位使div充满整个画画*/
top: 0;
bottom: 0; /*4个方向定位使div充满整个画画*/
width: 500px;
background:rgba(255,255,255,0.8); /*半透明效果*/
padding: 30px;
text-align: justify; /*为了使文字两端对齐 */
white-space:pre-wrap; /*保留换行效果*/
}
#div_start_bg{
width: 100%; height: 100%;
position: absolute;
left: 0px; top: 0px;
z-index: 44;
background-color: white;
}
</style>
<link type="text/css" rel="stylesheet" href="static/css/theme_s_page_zx.css">
<!-- 按钮部分的样式 -->
<link type="text/css" rel="stylesheet" href="static/css/theme_public_btn.css">
<!-- 按需加载，选择此片头时方才加载 -->
<link type="text/css" rel="stylesheet" href="static/css/start_intersect.css">
</head>
其次是写他的css文件,首先是开始页面的css
#div_intersect {
position: relative;
width: 100%;
z-index: 666;
display: none;
background-repeat: repeat;
background-size: 100%;
overflow: hidden;
}
#div_is_inner {
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
width: 100%;
min-height: 160px;
background: rgba(255,255,255,.85);
}
#canvas_is {
position: absolute;
display: block;
margin: 0 auto;
}
.div_is_typed {
width: 500px;
position: absolute;
top: 0;right: 0;left: 0;bottom: 0;
z-index: 668;
-webkit-overflow-scrolling: touch;
padding: 10%;
font-size: 1.2em;
overflow: scroll;
}
#div_is_img {
width: 100%;
max-height: 320px;
object-fit: cover;
display: none;
overflow: hidden;
margin: 0px 0px 15px 0px;
background-color: white;
border: 15px solid white;
border-radius: 3px;
display: none;
}
#div_is_img img {
width: 100%;
}
.div_is_open_bg {
width: 500px;
display: block;
background-color: rgba(255, 255, 255, 0.85);
position: fixed;
z-index: 669;
}
.div_is_open_btn {
width: 100px;
height: 54px;
margin: 200px auto;
background-image: url('../images/open_letter.jpg');
border-radius:3px;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #999;
-webkit-box-shadow:0px 0px 10px #999;
box-shadow:0px 0px 10px #999;
animation-name: heartbeat;
animation-duration: 2000ms;
animation-timing-function: cubic-bezier(0,0,0,1.74);
animation-delay: 500ms;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes heartbeat {
0% {
transform: scale(0.95);
}
100% {
transform: scale(0.95);
}
50% {
transform: scale(1);
}
}
其次是public—主题的css.如下:
#div_btn_inner{ /*按钮部分内层，用于定位*/
color:white;
text-shadow:1px 1px 1px #000;
width: 500px;
padding-left: 430px;
}
.div_btn {
position: fixed;
cursor: pointer;
width: 42px;
height: 42px;
border: 2px solid white;
border-radius: 50%;
font-size: 1em;
line-height: 40px;
text-align: center;
z-index:999;
}
#div_music {
border: none;
top: 30px;
}
#div_record {
top: 100px;
background-color: rgba(0, 0, 0, 0.5);
}
#div_support{
top: 170px;
background-color: rgba(0, 0, 0, 0.3);
}
.div_music_tips{
position: fixed;
top: 70px;
z-index:999;
}
.div_record_tips{
position: fixed;
top: 140px;
z-index:999;
}
.div_btn_big {
position: fixed;
cursor: pointer;
width: 52px;
background-color: rgba(112,128,144, 0.6);
border-radius: 5px;
padding: 10px 0px;
font-size: 1.1em;
line-height: 1.3em;
text-align: center;
z-index:999;
}
#div_s_upload {
top: 360px;
}
#div_s_sound {
top: 440px;
}
#div_s_choose {
top: 520px;
}
#div_s_qa {
top: 600px;
}
@-webkit-keyframes music_play_rotate{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
@-webkit-keyframes btn_rotate{ /*帮助按钮的动画*/
0% {
-webkit-transform:rotate(0deg);
}
40% {
-webkit-transform:rotate(0deg);
}
50% {
-webkit-transform:rotate(30deg);
}
60% {
-webkit-transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(30deg);
}
80% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(0deg);
}
}
然后是page页面的主题css
.div_s_page_zx * {
color: #555;
word-wrap: break-word;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.div_s_page_zx h2 {
font-size: 1.2em;
font-weight: 800 !important;
/*position: relative;*/
line-height: 1.5em;
padding: 10px 0 0;
}
.div_s_page_zx h4 {
font-weight: 800 !important;
/*position: relative;*/
line-height: 1.5em;
padding: 10px 0 0;
}
.div_s_page_zx p {
/*position: relative;*/
line-height: 1.5em;
padding: 10px 0 0;
}
.div_s_page_zx blockquote {
display: inline-block;
padding-left: 1em;
border-left: 3px solid #d0d0d0;
}
.div_s_page_zx ul {
padding-left: 20px;
list-style: disc;
}
.div_s_page_zx li {
/*position: relative;*/
line-height: 1.5em;
padding: 10px 0 0;
}
.div_s_page_zx {
/*outline: none;*/
/*box-sizing: border-box;*/
color: #555;
word-wrap: break-word;
}
js文件,我的思路是如下,请看代码细节注释👀: 1、star开始界面的js
//以下的_is是_intersect的缩写
var array_is_text;
function init_intersect(){
// 初始化两个div的高度
$("#div_is_inner").css({"height":$(window).height()+"px"});
$(".div_is_typed").css({"height":$(window).height()+"px"});
$(".div_is_open_bg").css({"height":$(window).height()+"px"});
//设置自定义背景
$("#div_intersect").css({"height":$(window).height()+"px"});
var start_bg_img=start_content['bg_img'];
if(typeof(start_content['bg_style'])!='undefined' && start_content['bg_style']=='bg_custom'){
if(typeof(start_bg_img)!='undefined' && start_bg_img!=''){
$("#div_intersect").css({"background-image": 'url('+start_bg_img+')'});
}
}
var intersect_text=start_content['intersect_text'];
if(typeof(intersect_text)!='undefined' && intersect_text!=''){
array_is_text=[intersect_text]; //加载自定义内容
}else{ //设置默认值
array_is_text=['我知道遇见你不容易，错过会很可惜，我不希望余生都是回忆，我想余生每天都是你，我爱你。'];
// array_str_temp=[];
// random_text_array(array_str_temp,3);
// array_is_text[0]=array_is_text[0]+'<br>'+array_str_temp.join('<br>');
console.log(array_is_text);
}
}
function init_is_typed(){
$(".div_is_open_bg").fadeOut("slow"); //隐藏初始bg
// 设置正文之前的照片
var img_src=start_content['img_src'];
if(typeof(start_content['img_bool'])!='undefined' && start_content['img_bool']=='img_true'){ //如果设置了照片
if(typeof(img_src)!='undefined' && img_src!=''){
$("#div_is_img").fadeIn("slow"); //
$("#div_is_img .img_is_typed").attr('src',img_src); //
}
}
if(typeof(start_content['img_bool'])=='undefined' || typeof(start_content['intersect_text'])=='undefined'){
var random_img=random_img_as();
$("#div_is_img").fadeIn("slow"); //
$("#div_is_img .img_is_typed").attr('src',random_img); //
}
//以下是打字效果的js
var str_cursorChar;
if(typeof(start_content['cursor_char'])!='undefined' && start_content['cursor_char']!=''){
switch(start_content['cursor_char']){ //设置打字光标的样式
case 'cursor_heart':
str_cursorChar='❤';
break;
case 'cursor_sub':
str_cursorChar='_';
break;
case 'cursor_music':
str_cursorChar='♫';
break;
case 'cursor_star':
str_cursorChar='★';
break;
case 'cursor_sun':
str_cursorChar='☀';
break;
default:
str_cursorChar='|';
}
}else{
str_cursorChar='❤';
}
var typed_intersect = new Typed('#span_is_typed', {
strings: array_is_text, //输入内容, 支持html标签
typeSpeed: 150, //打字速度
// backSpeed: 50, //回退速度
// backDelay: 1000,
loop: false, //要不要循环
cursorChar: str_cursorChar,//替换光标的样式
contentType: 'html', //值为html时，将打印的文本标签直接解析html标签
onComplete: function(abc){
console.log(abc);
console.log('finished typing words');
setTimeout(function(){
init_theme();
$('#div_intersect').remove();
},2000);
},
});
}
function random_text_array(temp_array,length){ //获取随机的模板图片
console.log('random_text_array');
var random_array=[];
while(random_array.length<length){
// var random_num=Math.floor(Math.random()*(array_as_pics.length-0))+0;
var random_num=Math.floor(Math.random()*(array_as_words_love.length)); //随机取值
if(random_array.indexOf(random_num)==-1){
random_array.push(random_num);
}
}
// console.log(random_array);
for(var i=0; i<length; i++){
temp_array.push(array_as_words_love[random_array[i]]); //获取随机的模板图片
}
}
function random_img_as(){ //获取随机的模板图片
// console.log('random_img_as');
var random_num=Math.floor(Math.random()*(array_as_pics_s.length)); //随机取值
var random_img=array_as_pics_s[random_num];
return random_img;
}
// 这是画布动画背景的js
var canvas_is = document.getElementById("canvas_is");
var ctx_is = canvas_is.getContext("2d");
//设置画布的大小
var cw_is = canvas_is.width = window.innerWidth,
cx = cw_is / 2;
var ch_is = canvas_is.height = window.innerHeight,
cy = ch_is / 2;
ctx_is.fillStyle = "#483D8B"; //这个似乎没有用？？
var linesNum = 25; //线条的数量
var linesRy = []; //
var requestId = null;
for (var i = 0; i < linesNum; i++) {
var flag = i % 2 == 0 ? "h" : "v";
var l = new Line_is(flag);
linesRy.push(l);
}
setTimeout(function () {
Init_is();
addEventListener('resize', Init_is, false);
}, 15);
// 画线
function Line_is(flag) {
this.flag = flag;
this.a = {};
this.b = {};
if (flag == "v") {
this.a.y = 0;
this.b.y = ch_is;
this.a.x = randomIntFromInterval(0, ch_is);
this.b.x = randomIntFromInterval(0, ch_is);
} else if (flag == "h") {
this.a.x = 0;
this.b.x = cw_is;
this.a.y = randomIntFromInterval(0, cw_is);
this.b.y = randomIntFromInterval(0, cw_is);
}
this.va = randomIntFromInterval(25, 100) / 100;
this.vb = randomIntFromInterval(25, 100) / 100;
this.draw = function () {
ctx_is.strokeStyle = "#D8BFD8"; //线条的颜色
ctx_is.beginPath();
ctx_is.moveTo(this.a.x, this.a.y);
ctx_is.lineTo(this.b.x, this.b.y);
ctx_is.stroke();
}
this.update = function () {
if (this.flag == "v") {
this.a.x += this.va;
this.b.x += this.vb;
} else if (flag == "h") {
this.a.y += this.va;
this.b.y += this.vb;
}
this.edges();
}
this.edges = function () {
if (this.flag == "v") {
if (this.a.x < 0 || this.a.x > cw_is) {
this.va *= -1;
}
if (this.b.x < 0 || this.b.x > cw_is) {
this.vb *= -1;
}
} else if (flag == "h") {
if (this.a.y < 0 || this.a.y > ch_is) {
this.va *= -1;
}
if (this.b.y < 0 || this.b.y > ch_is) {
this.vb *= -1;
}
}
}
}
function Draw_is() {
requestId = window.requestAnimationFrame(Draw_is);
ctx_is.clearRect(0, 0, cw_is, ch_is);
for (var i = 0; i < linesRy.length; i++) {
var l = linesRy[i];
l.draw();
l.update();
}
for (var i = 0; i < linesRy.length; i++) {
var l = linesRy[i];
for (var j = i + 1; j < linesRy.length; j++) {
var l1 = linesRy[j]
Intersect2lines(l, l1);
}
}
}
function Init_is() {
linesRy.length = 0;
for (var i = 0; i < linesNum; i++) {
var flag = i % 2 == 0 ? "h" : "v";
var l = new Line_is(flag);
linesRy.push(l);
}
if (requestId) {
window.cancelAnimationFrame(requestId);
requestId = null;
}
// cw_is = canvas_is.width = window.innerWidth,
cw_is = canvas_is.width = 500,
cx = cw_is / 2;
ch_is = canvas_is.height = window.innerHeight,
cy = ch_is / 2;
Draw_is();
}
function Intersect2lines(l1, l2) {
var p1 = l1.a,
p2 = l1.b,
p3 = l2.a,
p4 = l2.b;
var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator;
var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator;
var x = p1.x + ua * (p2.x - p1.x);
var y = p1.y + ua * (p2.y - p1.y);
if (ua > 0 && ub > 0) {
markPoint({
x: x,
y: y
})
}
}
// 生成相交点
function markPoint(p) {
ctx_is.beginPath();
ctx_is.fillStyle = "#DDA0DD"; //相交点的颜色
ctx_is.arc(p.x, p.y, 2, 0, 2 * Math.PI);
ctx_is.fill();
}
function randomIntFromInterval(mn, mx) {
return ~~(Math.random() * (mx - mn + 1) + mn);
}
祝福页面的js文件如下:
var array_as_words_love=[
// '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十',
'一直都觉得很幸运，世界这么大，能与你相遇相知',
'其实你并不是什么都好，但是你什么都让我忘不了',
'无论我本人多么平庸，我总觉得对你的爱很美',
'我做事三分钟热度，却也爱你这么久',
'每次想起你，我都发现自己是微笑着的',
'陪伴是最长情的告白，相守是最浪漫的承诺',
'让我们一直牵着手，告诉对方什么是永远',
'我上辈子可能是碳酸饮料，一见到你就开心的冒泡',
'你是年少的欢喜，倒过来念也是你',
'你的心，是我去到世界尽头还想再回来的地方',
'虽非青梅竹马，却也两情相悦，得一城终老，携一人白首',
'想做你的牙齿，我难受的时候，有你疼',
'我希望我80岁醒来的时候，是你在我身边…',
'我真是个大笨蛋，除了喜欢你，我什么都做不好',
'我希望，我的孩子笑起来，有你的模样',
'山有木兮木有枝，心悦君兮君不知',
'你是我这一生等了半世未拆的礼物',
'我一直都没有换电话，就是等你找我',
'不是除了你，我就没人要；只是除了你，我谁都不要',
'纵然有百万个理由离开你，我也会找一个理由为你留下',
'你是我的四月蒹葭，爱恋依然苍苍',
'以前错过的风景，今后我们一起去看',
'和你在一起的时候，我就没羡慕过别人',
'愿有岁月可回头，且以深情共白首',
'好不容易遇见你，竟花光了我所有运气',
'都怪你让我分心。从遇见你的那一刻，你就让我分心',
'不好意思，有些情话是我学的，但爱你是真心的',
'你累不累？你在我脑海里跑了一天了',
'我不喜欢这个世界，我只喜欢你',
'谢命运让你我相遇，于千万人之中，在时光的荒野里，不早也不晚',
'你的过去，我来不及参与。你的将来，我奉陪到底',
'春林初盛，春水初生，春风十里，不如你',
'任他凡事清浊，为你一笑间轮回甘堕',
'愿用我三生烟火，换你一世迷离',
'只缘感君一回顾，使我思君朝与暮',
'待我长发及腰，少年娶我可好。待你青丝绾正，铺十里红妆可愿',
'秒回不是碰巧，而是我一直在等你的消息',
'我有点花心，爱上了每一个你',
'我本想浪荡一生，却不小心钟情你一人',
'鸟患了恐高症，鱼变成了旱鸭子，所有逻辑都被推翻，我还是要喜欢你',
'遇见你是多小的概率我不知道，我只想把失去你的概率变为零',
// '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十',
'我能想到最浪漫的事，就是和你一起慢慢变老',
'你一定是偷偷作弊了，不然在我心里怎么可能会是满分',
'不是因为想恋爱才遇见你，而是遇见你之后我才有了恋爱的想法',
'你就像是开着一架喷气式的小飞机，扑哧扑哧地就飞进了我的心',
'不做玫瑰，要做你心上野草，一点湿意便肆意疯长，烧不尽吹又生',
'无人问津的渡口总是开满野花，就像我爱你却支支吾吾说不出话',
'这世间虽有千般好，但唯有你最珍贵',
'我不喜欢迁就，却用最干净的真心，为你妥协了很久',
'时光明媚了你的眼，也让你住进了我的心房',
'你不是最好的，但是有你，却比什么都好',
'没什么特别喜欢的零食，没什么特别喜欢的歌，唯有个特别喜欢的你',
'我还是很喜欢你，像风走了八千里，不问归期',
'我还是很喜欢你，像长空过雁，字字相思',
'还是很喜欢你，像燕尾剪断烟雨，不知何起',
'我目光短浅，只看得见你，我心胸狭窄，只容得下你',
'山川草原湖泊，不及你的双眸深谭动人；世间万般美好，不及你对我轻轻一笑',
'最长的情，是平淡中的不离不弃，最贴心的的暖，是风雨中的相依相伴',
'我曾把光阴浪费，甚至鲁莽得视死如归，因为爱上了你，才开始渴望长命百岁',
'往后余生，风雪是你，平淡是你，心底温柔是你，目光所致都是你',
'我想用余生为你暖一盏茶，微风扬起时，勿忘归家',
'我也想知道，你究竟是哪里好，竟让我如何也忘不掉',
'只因为我喜欢你，那一刻，这世上便不再有逻辑',
'最美丽的事，莫过于在最好的时光遇见你，相互嫌弃，却又不离不弃',
'我曾爱慕诗与远方，无所羁绊，直到遇见了你，才发现你的心才是我想去的地方',
'在爱你这件事上，我的眼睛、耳朵、嘴巴统统都是同谋',
'这种心跳的喜欢，就是我帮你写个名字，都会觉得荣幸万分',
'想要惯得你无法无天，宠得你娇俏任性。我做过最好的事，就是爱上了你',
'早就想劝你别吸烟，但烟雾中的你又是那么帅',
'我希望我知道如何戒掉你',
'一辈子只面对一个人，想想就可怕，但如果是眼前这个人的话，愿意赌一下',
'水中月是天上月，眼前人是心上人',
'来日方长，给你朝朝，夕夕也给你',
'我攒了一辈子的情话，想要说给你听',
'承蒙你的出现，够我喜欢好多年',
'岁月安然，不负遇见；不偏不倚，刚好是你',
'我知道遇见你不容易，错过会很可惜，我不希望余生都是回忆，我想余生每天都是你，我爱你',
'我不爱听那些浮夸的情话，可对我而言，你说的每一句都是情话',
'我希望，以后你能用我的名字拒绝所有人',
'你是我的可遇不可求。我可以不吃饭不睡觉，但无法不想你',
'在我流淌的时光里，只有一个你。我喜欢你，没有技巧，真诚且野蛮',
'其他女生又漂亮又温柔又懂事，但是那关我什么事，我最喜欢的就只有你',
'我的酒量大概就是2打啤酒，或者半斤白酒，再或者你的一次微笑吧',
'我喜欢那些闪光的东西，比如冬日的雪花，天上的星星，还有你的眼睛',
'时间是外在的光斑，还是心跳微妙的浮点，而你的微笑百看不腻，像阳光柔和干净',
'我愿把因果轮回还给僧尼，把眉目清秀还给天地，把松间细雨还给初遇，把一见钟情还给你',
'我对你是指针向南，我爱你是深海沉船，你一来是万物复苏，你离开是世界荒芜',
'遇见你花了我十多年的时间，爱上你却只用了几秒种',
'也许你并不是为我而生，可我却有幸与你相伴',
'遇见你是偶然的，喜欢你是自然的，爱上你是毅然的，得到你是欣然的，伴你一生是必然的',
// '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十',
];
var array_as_words_birthday=[
'愿你所有等待都能出现，所有愿望都能实现，所有期待都能如愿，所有梦想都能兑现，愿你生日快乐无限',
'今天是你生日，送你一块蛋糕，愿你吃出纯真美丽；歌曲也送给你，愿你听出吉祥如意！生日快乐',
'蛋糕一切满嘴油，相见匆匆别匆匆。日历一翻365，流星一闪划长空。生日快乐，愿你心想事成借东风',
'祝你百事可乐，万事芬达，天天哇哈哈，月月乐百事，年年高乐高，心情似雪碧，永远都醒目',
'摘一颗星，采一朵云，装入思念的礼包，将一份宁静和喜悦悄悄带给你，愿你青春长驻，生日快乐',
'送你一份温馨两份问候，三份美好四份祝福，五份高贵六份前程，七份典雅八份柔情，九份财运十份真诚',
'老实说我是上帝赐给你的礼物，但愿这份礼物不是太糟糕，希望你能特别喜欢这个礼物，祝你生日快乐',
'你生日到了？我差点忘记！都怪岁月没在你脸上留下痕迹，沧桑没在你的气质上打折扣。生日快乐哦',
'零点零分零一秒，我的祝福刚刚好，昨夜星辰昨夜梦，今日许愿今日圆。生日快乐哦',
'开心快乐一锅同煮，吉祥如意一船同渡，平安顺利一起上路，幸福好运一同奔赴。生日快乐哦',
'今天是个特别的日子，我在月宫里看到你。真是猪性不改，怎么又跑到月宫来了？呵呵，猪你生日快乐',
'猪你快快长！猪你早日出栏！猪你生日快乐！',
'你是哈蜜我是瓜，生日你不笨瓜瓜，看了信息笑哈哈，不愧是个哈蜜瓜！',
'大海啊全他妈是水，蜘蛛啊全他妈是腿，辣椒啊真他妈辣嘴，祝你生日快乐天天开怀合不拢嘴',
'当我把神灯擦三下后，灯神问我想许什么愿？我说希望正在看这个信息的人生日快乐，永远幸福',
// '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十',
];
var array_as_pics=[
'/Public/img_assist/img_as_cartoon_1.jpg',
'/Public/img_assist/img_as_cartoon_2.jpg',
'/Public/img_assist/img_as_cartoon_3.jpg',
'/Public/img_assist/img_as_cartoon_4.jpg',
'/Public/img_assist/img_as_cartoon_5.jpg',
'/Public/img_assist/img_as_film_1.jpeg',
'/Public/img_assist/img_as_film_2.jpeg',
'/Public/img_assist/img_as_film_3.jpeg',
'/Public/img_assist/img_as_lovers_1.jpg',
'/Public/img_assist/img_as_lovers_2.jpeg',
'/Public/img_assist/img_as_lovers_3.jpeg',
'/Public/img_assist/img_as_lovers_4.jpeg',
'/Public/img_assist/img_as_lovers_5.jpg',
'/Public/img_assist/img_as_lovers_6.jpg',
'/Public/img_assist/img_as_lovers_7.jpeg',
'/Public/img_assist/img_as_lovers_8.jpeg',
'/Public/img_assist/img_as_lovers_9.jpeg',
'/Public/img_assist/img_as_lovers_10.jpg',
'/Public/img_assist/img_as_lovers_11.jpeg',
'/Public/img_assist/img_as_olds_1.png',
'/Public/img_assist/img_as_olds_2.png',
'/Public/img_assist/img_as_olds_3.png',
'/Public/img_assist/img_as_olds_4.png',
'/Public/img_assist/img_as_olds_5.png',
'/Public/img_assist/img_as_olds_6.png',
'/Public/img_assist/img_as_olds_7.png',
'/Public/img_assist/img_as_tagxedo_1.jpg',
'/Public/img_assist/img_as_tagxedo_3.jpg',
'/Public/img_assist/img_as_written_1.jpg',
'/Public/img_assist/img_as_written_2.jpg',
'/Public/img_assist/img_as_written_3.jpg',
'/Public/img_assist/img_as_written_4.jpg',
'/Public/img_assist/img_as_written_5.jpg',
'/Public/img_assist/img_as_written_6.jpg',
];
//主要用于全空作品
var array_as_pics_s=[
// '/Public/img_assist/img_as_cartoon_1.jpg',
'/Public/img_assist/img_as_cartoon_2.jpg',
'/Public/img_assist/img_as_cartoon_3.jpg',
'/Public/img_assist/img_as_cartoon_4.jpg',
'/Public/img_assist/img_as_cartoon_5.jpg',
// '/Public/img_assist/img_as_film_1.jpeg',
'/Public/img_assist/img_as_film_2.jpeg',
'/Public/img_assist/img_as_film_3.jpeg',
'/Public/img_assist/img_as_lovers_1.jpg',
// '/Public/img_assist/img_as_lovers_2.jpeg',
// '/Public/img_assist/img_as_lovers_3.jpeg',
// '/Public/img_assist/img_as_lovers_4.jpeg',
'/Public/img_assist/img_as_lovers_5.jpg',
'/Public/img_assist/img_as_lovers_6.jpg',
'/Public/img_assist/img_as_lovers_7.jpeg',
'/Public/img_assist/img_as_lovers_8.jpeg',
'/Public/img_assist/img_as_lovers_9.jpeg',
'/Public/img_assist/img_as_lovers_10.jpg',
'/Public/img_assist/img_as_lovers_11.jpeg',
'/Public/img_assist/img_as_olds_1.png',
'/Public/img_assist/img_as_olds_2.png',
'/Public/img_assist/img_as_olds_3.png',
'/Public/img_assist/img_as_olds_4.png',
'/Public/img_assist/img_as_olds_5.png',
'/Public/img_assist/img_as_olds_6.png',
'/Public/img_assist/img_as_olds_7.png',
// '/Public/img_assist/img_as_tagxedo_1.jpg',
// '/Public/img_assist/img_as_tagxedo_3.jpg',
// '/Public/img_assist/img_as_written_1.jpg',
'/Public/img_assist/img_as_written_2.jpg',
'/Public/img_assist/img_as_written_3.jpg',
// '/Public/img_assist/img_as_written_4.jpg',
'/Public/img_assist/img_as_written_5.jpg',
// '/Public/img_assist/img_as_written_6.jpg',
];
var array_as_music=[
'http://cdn.aitetu520.com/yinwei_aiqin.mp3',
'http://cdn.aitetu520.com/chang_gei_ni_ting.mp3',
'http://cdn.aitetu520.com/ai_hen_jiandan.mp3',
'http://cdn.aitetu520.com/you_are_my_sunshine.mp3',
'http://cdn.aitetu520.com/qinai_de_lvren.mp3',
'http://cdn.aitetu520.com/i_love_you.mp3',
'http://cdn.aitetu520.com/qing_fei_deyi.mp3',
'http://cdn.aitetu520.com/jiushi_aini.mp3',
];
var array_as_video=[
'http://cdn.aitetu520.com/with_you_forever.mp4',
'http://cdn.aitetu520.com/draw_birthday.mp4',
'http://cdn.aitetu520.com/film_mixed_loveyou.mp4',
'http://cdn.aitetu520.com/film_mixed_birthday.mp4',
];
触发音乐相关的js如下,请看代码解释和注释👀:
var audio_music=document.getElementById('audio_music');
var audio_record=document.getElementById('audio_record');
if(typeof(music_json['music_select'])!='undefined' && music_json['music_select']!='null' && music_json['music_select']!=''){
if(music_json['music_select']=='m_online' && music_json['m_online_url']!='null' && music_json['m_online_url']!=''){ //选择在线列表
$('#audio_music').attr('src',music_json['m_online_url']);
}
if(music_json['music_select']=='m_upload' && music_json['m_upload_url']!='null' && music_json['m_upload_url']!=''){ //选择在线列表并且上传了歌曲
$('#audio_music').attr('src',music_json['m_upload_url']);
}
if(music_json['music_select']=='m_upload' && (music_json['m_upload_url']=='null' || music_json['m_upload_url']=='')){ //选择在线列表但是没有上传歌曲
console.log('music_select m_upload but m_upload_url is null, set defaulted music');
var random_music=random_music_as();
$('#audio_music').attr('src',random_music);
}
if(theme!='audio_list' || (theme=='audio_list' && start_id!='null')){
audio_music.play(); //触发音乐自动播放
}else{
audio_music.pause();
console.log('audio_list && no start');
}
}else{ //全新作品或空作品
console.log('set random music');
var random_music=random_music_as();
$('#audio_music').attr('src',random_music);
if(theme!='audio_list' || (theme=='audio_list' && start_id!='null')){
audio_music.play(); //触发音乐自动播放
}else{
audio_music.pause();
console.log('audio_list && no start');
}
}
if(typeof(record_json['record_bool'])!='undefined' && record_json['record_bool']!='null' && record_json['record_bool']!=''){
if(record_json['record_bool']=='r_true' && record_json['r_wechat_url']!='null' && record_json['r_wechat_url']!=''){ //选择要语音
$('#audio_record').attr('src',record_json['r_wechat_url']);
}
if(record_json['record_bool']=='r_true' && (record_json['r_wechat_url']=='null' || record_json['r_wechat_url']=='')){ //选择要语音，但却没有录语音
$('#div_record').hide(); //不显示
$('#div_record_tips').hide();
}
if(record_json['record_bool']=='r_false'){ //如果不要语音则不显示
$('#div_record').hide();
$('#div_record_tips').hide();
}
}else{
if(theme_content['bool_save']==false){ //全新作品或未保存内容，且未定义语音
console.log('set random record');
$('#audio_record').attr('src','http://cdn.aitetu520.com/chongqin_shenlin.mp3');
}else{ //非全新作品或已保存内容，但未定义语音，则不显示语音
$('#div_record').hide();
$('#div_record_tips').hide();
}
}
function random_music_as(){ //获取随机的模板图片
// console.log('random_words_as');
var random_num=Math.floor(Math.random()*(array_as_music.length)); //随机取值
var random_music=array_as_music[random_num];
return random_music;
}
//控制音乐切换播放暂停
var img_music=document.getElementById('img_music');
var timeout_music;
function music_switch(){ //切换
clearTimeout(timeout_music);
if(audio_music.paused){
console.log('switch music to play');
audio_music.play();
audio_record.pause(); //播放音乐时录音一定暂停
img_music.style.webkitAnimation="music_play_rotate 1s linear infinite";
$(".div_music_tips").html("正播放").show();
timeout_music=setTimeout(function(){$(".div_music_tips").hide()}, 2500);
}else{
console.log('switch music to paused');
audio_music.pause();
// audio_record.play(); //
img_music.style.webkitAnimation="";
$(".div_music_tips").html("已暂停").show();
timeout_music=setTimeout(function(){$(".div_music_tips").hide()}, 2500);
}
}
var timeout_record;
var div_record=document.getElementById('div_record');
function record_switch(){ //切换
clearTimeout(timeout_record);
if(audio_record.paused){
console.log('switch record to play');
audio_record.play();
audio_music.pause(); //
img_music.style.webkitAnimation="";
div_record.style.webkitAnimation="btn_rotate 1s linear infinite";
$(".div_record_tips").html("正播放").show();
timeout_record=setTimeout(function(){$(".div_record_tips").hide()}, 2500);
}else{
console.log('switch record to pause');
audio_record.pause(); //播放音乐时录音一定暂停
audio_music.play();
img_music.style.webkitAnimation="music_play_rotate 1s linear infinite";
div_record.style.webkitAnimation="";
$(".div_record_tips").html("已暂停").show();
timeout_record=setTimeout(function(){$(".div_record_tips").hide()}, 2500);
}
}
//以下是微信相关的设置
console.log(signPackage);
wx.config({
debug: false,
appId: signPackage["appid"],
timestamp: signPackage["timestamp"],
nonceStr: signPackage["nonceStr"],
signature: signPackage["signature"],
jsApiList: [
'checkJsApi',
// 'updateAppMessageShareData',
// 'updateTimelineShareData'
]
});
wx.ready(function(){
console.log('wx.ready success to start');
if(theme!='audio_list' || (theme=='audio_list' && start_id!='null')){
audio_music.play(); //触发音乐自动播放
}else{
audio_music.pause(); //触发音乐自动播放
console.log('audio_list && no start');
}
});
wx.error(function(res){
console.log('wx.error -> '+res);
if(theme!='audio_list' || (theme=='audio_list' && start_id!='null')){
audio_music.play(); //触发音乐自动播放
}else{
audio_music.pause(); //触发音乐自动播放
console.log('audio_list && no start');
}
});
更多详情🔎移步GitHub代码仓库
结果最终的文件布局如下😁:
最后整合文件和文件夹后可以在本地或者浏览器直接查看:
本地预览💌:
谢谢大家~🙏
掘友们觉得这篇文章有点意思的话💁♂️,欢迎点赞👍,留言,🙏谢谢各位掘友,包粽子去啦~~
