0%

如果喜欢那就坚持吧!

在一开始的时候看到大家聊天用的qq表情包gif——截图选老婆,感觉很有意思(×)感觉动漫小姐姐很好看(√)

我就想自己能不能用代码写个网页,然后截图选老婆,嘿嘿嘿嘿o_o ….

效果演示☞ 城墙墨の扭蛋机

大概就是这样

利用图片的预加载,计时器实现图片轮播,清除定时器实现暂停。

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>城墙墨の扭蛋机</title>
        <link rel="shortcut icon" href="https://cdn-1252875933.cos.ap-beijing.myqcloud.com/images/2019/09/5d7f434612d47.ico">
        <style>
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                margin: 10% auto;
                border: 1px;
                border-color: aqua;
                width: 400px;
                height:560px;
                text-align: center;
                overflow: hidden;
                position: relative;
            }
            img {
                height: 560px;
            }
            #post,#again {
                display: inline-block;
                 position: absolute;
                 bottom: 0;
                  padding: 15px 25px;
                  font-size: 24px;
                  cursor: pointer;
                  text-align: center;   
                  text-decoration: none;
                  outline: none;
                  color: #fff;
            }
            #post {
                 left: 0;
                  background-color: rgb(194, 68, 18); 
                  border: none;
                  border-radius: 15px;
                  box-shadow: 0 9px #999;            
            }
            #post:hover {
                background-color: rgb(167, 16, 16);
            }

            #post:active {
                  background-color: rgb(194, 68, 18);
                  box-shadow: 1px 5px #666;
                  transform: translateY(4px);
                }
            #again {
                right: 0;
                  background-color: #4CAF50;
                  border: none;
                  border-radius: 15px;
                  box-shadow: 0 9px #999;            
            }
            #again:hover {
                background-color: #4CAF50;
            }

            #again:active {
                  background-color:#4CAF50;
                  box-shadow: 1px 5px #666;
                  transform: translateY(4px);
                }

            footer {
                position: absolute;
                bottom: 2px;
                right: 10px;
            }
            @media screen and(max-width: 700px) {
                body {
                    height: 800px;
                }
                img {
                    width: 80%;
                }
            }
        </style>

    </head>
    <body>
        <div id="outer">
            <img url="https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115154.jpg" alt="">

            <button id="post">&nbsp;开始截图&nbsp;</button>
            <button id="again">&nbsp;再来一次&nbsp;</button>
            <p>如果上天能够再给我一次机会</p>
        </div>

        <footer>
            designed by 
            <a href="https://inkwall.cn">inkWall</a>
        </footer>

        <script type="text/javascript">

            var img = document.getElementsByTagName("img")[0];

            var imgArr = [];
            imgArr[0] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115154.jpg";
            imgArr[1] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115209.jpg";
            imgArr[2] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115201.jpeg";
            imgArr[3] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115137.webp";
            imgArr[4] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115146.jpg";
            imgArr[5] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115129.webp";
            imgArr[6] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115122.webp";
            imgArr[7] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115117.webp";
            imgArr[8] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115109.webp";
            imgArr[9] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115101.webp";
            imgArr[10] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115053.webp";
            imgArr[11] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115044.webp";
            imgArr[12] = "https://cdn.jsdelivr.net/gh/inkwall233/imgcdn/gainwife/20200711115028.webp";


            var imgWrap = [];
            function preloadImg(arr) {
                for(var i=0 ; i< arr.length ; i++) {
                    imgWrap[i] = new Image();
                    imgWrap[i].src = arr[i];
                }
            }

            preloadImg(imgArr);

            var index = 0;
            var star;
            var timer = null;
            /*图片循环0*/
            function show_picture(){
                //开始定时器判断,
                if (timer){
                    clearTimeout(timer);
                }
                timer=window.setTimeout("show_picture()", 100);
                index++;
                if(index>imgArr.length-1){
                    index=0;    
                }
                img.src = imgArr[index];
            };
            show_picture();

            var post = document.getElementById("post");
            var again = document.getElementById("again");
            post.onclick = function(){
                clearTimeout(timer);
                alert("恭喜,截到第"+(index+1)+"位");
            }

            again.onclick = function(){
                show_picture();
            }
        </script>
    </body>
</html>

查看效果请点击https://inkwall233.github.io/gainwife