saber酱的抱枕

生于忧患,死于安乐

12/26
09:59
学习

圣诞节页面效果

昨天圣诞节,本站页面也改成了圣诞ver~我还是很喜欢圣诞ver的,截图留念一下。

圣诞ver里的内容都是用JavaScript添加和控制的,代码如下:

if (isPC) {	//如果在PC端,则添加圣诞相关的内容
	// 01:网页背景换成东方的图片
	document.body.style.backgroundImage="url('/f/47004232.jpg')";

	// 04:播放音乐:《ホーリーナイト》
	document.write("<div id='MerryChristmasMusicCtrl' date-playCtrl='pause'></div>");
	document.write("<style>#MerryChristmasMusicCtrl{width:25px;height:118px;text-align:center;font-size:14px;font-family:微软雅黑;position: fixed;z-index: 9999;background:#444;color:#fff;cursor: pointer;right:0;top:50%;border-radius: 4px;border:1px solid #000; display: none;}</style>");
	var MerryChristmasMusic=document.createElement("audio");
	MerryChristmasMusic.src="/f/%E3%83%9B%E3%83%BC%E3%83%AA%E3%83%BC%E3%83%8A%E3%82%A4%E3%83%88%20%28HOLY%20NIGHT%29_128kbps.mp3";
	MerryChristmasMusic.loop="loop";
	MerryChristmasMusic.volume=0.3;
	MerryChristmasMusic.play();
	$("#MerryChristmasMusicCtrl").show();
	$("#MerryChristmasMusicCtrl").html("暂停播放音乐");
	$("#MerryChristmasMusicCtrl").click(function  () {
		if ($("#MerryChristmasMusicCtrl").attr("date-playCtrl")=="pause") {
			MerryChristmasMusic.pause();
			$("#MerryChristmasMusicCtrl").html("继续播放音乐");
			$("#MerryChristmasMusicCtrl").attr("date-playCtrl","play");
		}else{
			MerryChristmasMusic.play();
			$("#MerryChristmasMusicCtrl").html("暂停播放音乐");
			$("#MerryChristmasMusicCtrl").attr("date-playCtrl","pause");
		};
	});
}

圣诞帽:

<script type="text/javascript">
if (isPC) {
	// 圣诞帽
	document.querySelector("#float").style.top = "32px";
	var shengdanmao = document.createElement("img");
	shengdanmao.src = "/f/%E5%9C%A3%E8%AF%9E%E5%B8%BD2.png";
	shengdanmao.className = "shengdanmao";
	document.querySelector("#float").insertBefore(shengdanmao, document.querySelector("#float a"));
	shengdanmao.style.position = 'absolute';
	shengdanmao.style.top = '-23px';
	shengdanmao.style.left = '13px';
	shengdanmao.style.zIndex = '99999';
}
</script>

雪花效果的代码以后用这里的:JavaScript网页下雪、雪花特效

圣诞节页面效果

  1. Google Chrome 59Google Chrome 59GNU/Linux x64GNU/Linux x64

    /*************************************************************************
    * 函数名称:check_christmas()
    * 功能说明:判断是否在圣诞节前后5天范围内
    * 参数说明:true:是圣诞节
    * false:不是圣诞节
    * 函数返回:bool
    * 完成时间:2017-07-25 10:34:11
    *************************************************************************/
    function check_christmas() {
    //time表示离下一个圣诞节还有多少天
    var time;
    var christ = new Date();
    var now = new Date();
    christ.setMonth(11);
    christ.setDate(25);
    var year = now.getFullYear();
    var diff = christ - now;
    if (diff < 0) {
    christ.setFullYear(year + 1);
    diff = christ - now;
    }
    time = Math.ceil(1.0 * diff / (1000 * 3600 * 24));
    return (time 359);
    }
    christmas_coming = check_christmas();

    回复