闺蜜简单生日页面

最新推荐文章于 2021-12-31 09:44:26 发布

槐夏

最新推荐文章于 2021-12-31 09:44:26 发布

阅读量1.5k

点赞数 13

文章标签： javascript vue.js css jquery html

本文链接：https://blog.csdn.net/cyt_Maybe/article/details/105787691

版权

这里写自定义目录标题

效果演示

在这里插入图片描述登录页面

<div class="container">
     <h1>生日快乐</h1>
     <form class="form">
           <input id="userName" name="userName" type="text" placeholder="姓名">
           <input id="pwd" name="pwd" type="password" placeholder="生日">
           <button type="submit" id="login-button">进入</button>
     </form>
</div>

$('#login-button').click(function(event) {
    var userName = document.getElementById("userName").value;
    var pwd = document.getElementById("pwd").value;
    //修改密码请改此处
    if (userName == "123" && pwd == "1999.03.28") {
        event.preventDefault();
        $('form').fadeOut(500);
        $('.wrapper').addClass('form-success');
        // requestFullScreen();
        setTimeout(function() {
            location.href = "time.html";
        }, 1000);
    } else {
        alert("Wrong Password");
    }
});

在这里插入图片描述出生时间计时（可修改）jquery.classycountdown.min.js：

function l() {
            BirthDay = new Date("05/13/1999 00:00:00"); //这个日期是可以修改的
            today = new Date();
            d = (today.getTime() - BirthDay.getTime()) / 1000;
            e = Math.floor(d / 86400);
            f = Math.floor(d % 86400 / 3600);
            g = Math.floor(d % 86400 % 3600 / 60);
            h = Math.floor(d % 86400 % 3600 % 60 % 60)
        }

在这里插入图片描述蛋糕制作的动画，由SVG绘制，点击左下角蛋糕图案播放生日快乐歌
祝福语，因为朋友最近在学韩语，所以结合了韩语，狗狗在鼠标经过会出现

<div class="htmleaf-container">

        <h1>귀엽다</h1>
        <p class="sub">김 진 우 와 이 프 를 부 르 세 요.</p>

        <main id="app">

            <mochi-box shiba="ume" mood="happy" blush left-eye="laugh" right-eye="laugh" left-ear="down" right-ear="down">
                <h2>一愿</h2>
                <h3>
                    <a target="_blank" href="">平安喜乐</a>
                </h3>
                <p class="shop kotobuki" title="平安喜乐">안녕 하 다</p>
            </mochi-box>

            <mochi-box shiba="sesame" mood="drool" left-ear="up" right-ear="up">
                <h2>二愿</h2>
                <h3>
                    <a target="_blank" href="">万事胜意</a>
                </h3>
                <p class="shop kotobuki" title="万事胜意">만사 가 뜻 대로 되다.</p>
            </mochi-box>

            <mochi-box shiba="tuna" mood="" left-ear="up" right-ear="middle">
                <h2>三愿</h2>
                <h3>
                    <a target="_blank" href="">回望无悔</a></h3>
                <p class="shop kotobuki" title="回望无悔">뒤 돌아 보면 후회 가 없다.</p>
            </mochi-box>

            <mochi-box shiba="okaka" pop mood="excited" left-ear="up" right-ear="flat">
                <h2>四愿</h2>
                <h3>
                    <a target="_blank" href="">不辜前程</a></h3>
                <p class="shop kotobuki" title="不辜前程">전 도 를 저 버 리 지 않다.</p>
            </mochi-box>

            <mochi-box shiba="random">
                <h2>变装</h2>
                <h3>狗狗大戏法</h3>
                <button>点我没错</button>
            </mochi-box>

            <br>

            <mochi-box shiba="anko" mood="cheeky" left-eye="open" right-eye="laugh" left-ear="flat" right-ear="middle">
                <h2>五愿</h2>
                <h3>
                    <a target="_blank" href="o">顺遂无忧</a>
                </h3>
                <p class="shop uemachi" title="顺遂无忧">순조롭게 진행되다.</p>
            </mochi-box>

            <mochi-box shiba="kinako" mood="gleam" blush left-eye="open" right-eye="open" left-ear="middle" right-ear="middle">
                <h2>六愿</h2>
                <h3>
                    <a target="_blank" href="">得偿所愿</a>
                </h3>
                <p class="shop uemachi" title="得偿所愿">원 하 는 바 를 이루다.</p>
            </mochi-box>

            <mochi-box shiba="sakura" mood="cute" blush left-eye="shy" right-eye="open" left-ear="down" right-ear="middle">
                <h2>七愿</h2>
                <h3>
                    <a target="_blank" href="">和光同尘</a>
                </h3>
                <p class="shop uemachi" title="和光同尘">화광 이 먼지 와 같다.</p>
            </mochi-box>

            <mochi-box shiba="monaka" mood="content" left-eye="open" right-eye="wink" left-ear="middle" right-ear="flat">
                <h2>八愿</h2>
                <h3>
                    <a target="_blank" href="">与时舒卷</a>
                </h3>
                <p class="shop uemachi" title="与时舒卷">시 류 에 편승 하 다.</p>
            </mochi-box>
            <mochi-box shiba="random">
                <h2>最后</h2>
                <h3>Baby</h3>
                <button><a href="fade.html">click me.</a></button>
            </mochi-box>

        </main>

    </div>

在这里插入图片描述这里可以放照片，一共有四屏（可自行增删）

var Lslide = document.querySelectorAll('.Lslide'),
            Rslide = document.querySelectorAll('.Rslide'),
            control = document.querySelectorAll('.oncontrol'),
            slideHeight = document.querySelector('.wrapper').clientHeight,
            color = ['#fdc97c', '#e5d3d0', '#00a3af', '#71b3d6'],
            index = 0;


        function init() {
            slideHeight = document.querySelector('.wrapper').clientHeight;
            for (i = 0; i < Lslide.length; i++) {
                Lslide[i].style.backgroundColor = color[i];
                Lslide[i].style.top = -slideHeight * i + "px";
                Rslide[i].style.top = slideHeight * i + "px";
            }
        }
        init()
        window.addEventListener('resize', function() {
            init()
        });

        function moveToTop() {

            index++;
            for (el = 0; el < Lslide.length; el++) {
                Lslide[el].style.top = parseInt(Lslide[el].style.top) + slideHeight + "px";
                Rslide[el].style.top = parseInt(Rslide[el].style.top) - slideHeight + "px";
            }

            if (index > Lslide.length - 1) {
                index = 0;
                for (el = 0; el < Lslide.length; el++) {
                    Lslide[el].style.top = -slideHeight * el + "px";
                    Rslide[el].style.top = slideHeight * el + "px";
                }
            }
        }

        function moveToBottom() {
            index--;
            for (el = 0; el < Lslide.length; el++) {
                Lslide[el].style.top = parseInt(Lslide[el].style.top) - slideHeight + "px";
                Rslide[el].style.top = parseInt(Rslide[el].style.top) + slideHeight + "px";

            }
            if (index < 0) {
                index = Rslide.length - 1;
                for (el = 0; el < Lslide.length; el++) {
                    Lslide[el].style.top = parseInt(Lslide[el].style.top) + slideHeight * Lslide.length + "px";
                    Rslide[el].style.top = parseInt(Rslide[el].style.top) - slideHeight * Rslide.length + "px";
                }
            }
        }

        function transition() {
            for (t = 0; t < Lslide.length; t++) {
                Lslide[t].style.transition = "all 0.8s";
                Rslide[t].style.transition = "all 0.8s";
            }
        }


        for (t = 0; t < control.length; t++) {
            control[t].addEventListener("click", function() {

                if (this.classList.contains('control-top')) {
                    moveToTop()
                }
                if (this.classList.contains('control-bottom')) {
                    moveToBottom()
                }

                transition()

            });
        }

        var wheeling;

        function mousemouve(e) {

            clearTimeout(wheeling);
            e.preventDefault();
            var e = window.event || e;
            var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

            wheeling = setTimeout(function() {
                wheeling = undefined;
                if (delta === 1) {
                    moveToTop()
                }
                if (delta === -1) {
                    moveToBottom()
                }
            }, 100);

            transition()
        }

        document.addEventListener("mousewheel", mousemouve);
        document.addEventListener("DOMMouseScroll", mousemouve);

在这里插入图片描述点击左上角页面可以播放音乐，五栏里面分别是不同的祝福语

<section class="strips">
        <article class="strips__strip">
            <div class="strip__content">
                <h1 class="strip__title" data-name="Ipsum"><img src="../img/情话.png"></h1>
                <div class="strip__inner-text">
                    <h2>爱你</h2>
                    <p>最让人感动的友谊是我希望永远和你在一起，这样我感到很幸福</p>
                    <p>但我希望你过上更好的生活且不虚此行，即使我们分开也没有关系
                    </p>
                    <!-- <p>
                        <a href="#" target="_blank"><i class="fa fa-qq"></i></a>
                    </p> -->
                </div>
            </div>
        </article>
        <article class="strips__strip">
            <div class="strip__content">
                <h1 class="strip__title" data-name="Dolor"><img src="../img/时间.png"></h1>
                <div class="strip__inner-text">
                    <h2>愿做你的一颗星</h2>
                    <p>每个人都会有一个星星兜，差不多的人生中,时而也会有闪闪发光的事情</p>
                    <p>所以你要留意去抓住它，好好装在自己的星星兜里</p>
                    <p>这样等你以后累了烦了，可以拿出来看看你的那些星星</p>
                    <p>就能度过艰难的时光</p>
                    <!-- <p>
                        <a href="#" target="_blank"><i class="fa fa-weibo"></i></a>
                    </p> -->
                </div>
            </div>
        </article>
        <article class="strips__strip">
            <div class="strip__content">
                <h1 class="strip__title" data-name="Sit"><img src="../img/礼物.png"></h1>
                <div class="strip__inner-text">
                    <h2>我们</h2>
                    <p>期待跟好久不见的你分享喜怒哀乐与碎碎念</p>
                    <p>那些身边的蓝天和白云那些积攒了很久的想念和牵挂那些一直被吐槽的糗事和小八卦</p>
                    <p> 互相想见面的心情最开心</p>
                    <p> 总是有很多的感同身受，面临的困境总是那么相似</p>
                    <p> 一定要一起努力，成为更好的我们</p>
                    <p> 风雨里做个大人，阳光下做个孩子</p>
                    <p> 安静努力、不必声张、前方有好人、有惊喜、有久违的感动</p>
                    <p> 世事千帆过，前方终会是温柔和月光</p>
                    <!-- <p>
                        <a href="#" target="_blank"><i class="fa fa-weixin"></i></a>
                    </p> -->
                </div>
            </div>
        </article>
        <article class="strips__strip">
            <div class="strip__content">
                <h1 class="strip__title" data-name="Amet"><img src="../img/拍合照.png"></h1>
                <div class="strip__inner-text">
                    <h2>天长地久</h2>
                    <p>可进可出，若即若离，可爱可怨，可聚而不会散</p>
                    <p>才是最天长地久的一种好朋友</p>
                    <!-- <p>
                        <a href="#" target="_blank"><i class="fa fa-leaf"></i></a>
                    </p> -->
                </div>
            </div>
        </article>
        <article class="strips__strip">
            <div class="strip__content">
                <h1 class="strip__title" data-name="Amet"><img src="../img/表白信.png"></h1>
                <div class="strip__inner-text">
                    <h2>愿你</h2>
                    <p>我希望你被打磨，永远光明磊落</p>
                    <p>我希望你能走过山山水水，写温柔的字，坦荡地爱</p>
                    <p>我希望你被阅读，不被辜负</p>
                    <p>你要飘摇着美丽，活得丰盛，或庄重</p>
                    <!-- <p>
                        <a href="#" target="_blank"><i class="fa fa-leaf"></i></a>
                    </p> -->
                </div>
            </div>
        </article>
        <i class="fa fa-close strip__close"></i>
        <div class="div1"><audio src="../music/Remember - Winner.mp3" controls>
        </audio></div>
        <script>
            window.addEventListener('load', function() {
                let div = document.querySelector('.div1');
                let music = document.querySelector('audio')
                let flag = true
                div.addEventListener('click', function() {
                    if (flag) {
                        music.play()
                        flag = !flag
                        this.style.animation = 'xuanzhuan 5s linear infinite'
                    } else if (flag == false) {
                        music.pause()
                        flag = !flag
                        this.style.animation = ''
                    }
                })
            })
        </script>
    </section>

    <script src="../js/jquery-2.1.1.min.js"></script>
    <script>
        var Expand = function() {
            var tile = $('.strips__strip');
            var tileLink = $('.strips__strip > .strip__content');
            var tileText = tileLink.find('.strip__inner-text');
            var stripClose = $('.strip__close');
            var expanded = false;
            var open = function() {
                var tile = $(this).parent();
                if (!expanded) {
                    tile.addClass('strips__strip--expanded');
                    tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
                    stripClose.addClass('strip__close--show');
                    stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
                    expanded = true;
                }
            };
            var close = function() {
                if (expanded) {
                    tile.removeClass('strips__strip--expanded');
                    tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
                    stripClose.removeClass('strip__close--show');
                    stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
                    expanded = false;
                }
            };
            var bindActions = function() {
                tileLink.on('click', open);
                stripClose.on('click', close);
            };
            var init = function() {
                bindActions();
            };
            return {
                init: init
            };
        }();
        Expand.init();
    </script>