Question

我有一个数组，可以在重新加载时重新加载随机图像和标题。我想通过javascript实现一个cookie，当数组重新加载所有独特内容时，会出现另一个图像，提醒用户他们已经查看了所有内容。目前，我有重复的图像，所以我也要求一些清晰度。谢谢！

<script type="text/javascript">

var cookie = document.cookie;
if (cookie.indexOf('visited=', 0) == -1) {
var expiration = new Date();
expiration.setDate(expiration.getDate()+1);
document.cookie = 'visited=14;expires=' + expiration + ';path=/';

var element = document.getElementById('finish');
element.style.display = 'block';
}
</script>

<script>
$(document).ready(function(){
    $("#photos").hide();
});

var work = new Array; workcap = new Array

work[0] = "0.jpg"; workcap[0] = "IVY Cook Branding Guide";
work[1] = "1.jpg"; workcap[1] = "Digital Tools Cover Page";
work[2] = "2.jpg"; workcap[2] = "5x8 Notebooks Branding Guide";
work[3] = "3.jpg"; workcap[3] = "Materials & Tools Vinyl Installation";
work[4] = "4.jpg"; workcap[4] = "Mouse Minutes Logo Design";
work[5] = "5.jpg"; workcap[5] = "Feministic Fairy Dust Heirarchy Design";
work[6] = "6.jpg"; workcap[6] = "3D Type Advertisement";
work[7] = "7.jpg"; workcap[7] = "3D Type Fishbowl Installation";
work[8] = "8.jpg"; workcap[8] = "Friend-Love Book Jacket";
work[9] = "9.jpg"; workcap[9] = "Hand Rendered Original Alphabet";
work[10] = "10.jpg"; workcap[10] = "Initial Brick Typography Cover";
work[11] = "11.jpg"; workcap[11] = "Nike Ekin Pitch Deck";
work[12] = "12.jpg"; workcap[12] = "American Cancer Society Pitch Deck";


var number = Math.floor(Math.random()*13)


</script>
<body class="subpage">


    <!-- Header -->
        <header id="header">
            <div class="logo"><a href="index.html">HANNAH NOWAK <span>work</span></a></div>
            <a href="#menu">MENU</a>
        </header>

    <!-- Nav -->
        <nav id="menu">
            <ul class="links">
                <li><a href="index.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="resume2.html">RESUME</a></li>
                <li><a href="gallery.html">GALLERY</a></li>
                <li><a href="email.html">CONTACT</a></li>
                <li><a href="elements.html">ELEMENTS</a></li>
            </ul>
        </nav>

    <!-- One -->
        <section id="One" class="wrapper style3">
            <div class="inner">
                <header class="align-center">
                    <p>RANDOMIZED PHOTO GALLERY</p>
                    <h2>PAST WORK</h2>
                </header>
            </div>
        </section>

    <!-- Two -->
        <section id="two" class="wrapper style2">
            <div class="inner">
                <div class="box">
                    <div class="content">
                        <header class="align-center">
                            <p>Reload page to see a random piece of my work</p><br>
    <div id="content">
       <img src="0.jpg" id="visible" height="50%" width="50%">

       <div id="caption">
       IVY Cook Branding Guide
       </div>

    </div>


    <div id="photos">
        <img src="0.jpg" id="thumb" alt="thumb">
        <img src="1.jpg" id="thumb" alt="thumb">
        <img src="2.jpg" id="thumb" alt="thumb">
        <img src="3.jpg" id="thumb" alt="thumb">
        <img src="4.jpg" id="thumb" alt="thumb">
        <img src="5.jpg" id="thumb" alt="thumb">
        <img src="6.jpg" id="thumb" alt="thumb">
        <img src="7.jpg" id="thumb" alt="thumb">
        <img src="8.jpg" id="thumb" alt="thumb">
        <img src="9.jpg" id="thumb" alt="thumb">
        <img src="10.jpg" id="thumb" alt="thumb">
        <img src="11.jpg" id="thumb" alt="thumb">
        <img src="12.jpg" id="thumb" alt="thumb">
<script>
document.querySelector("#visible").src = [number] + ".jpg";
document.querySelector("#caption").innerHTML = workcap[number];
</script>

                            </div>
                        </header>
                    </div>
                </div>
            </div>
        </section>

    <!-- Footer -->
        <footer id="footer">
            <div class="container">
                <ul class="icons">
                    <li><a href="https://www.instagram.com/blcdesigns/" class="icon fa-instagram" class="icon fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
                    <li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
                </ul>
            </div>
        </footer>

    <!-- Scripts -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/jquery.scrollex.min.js"></script>
        <script src="assets/js/skel.min.js"></script>
        <script src="assets/js/util.js"></script>
        <script src="assets/js/main.js"></script>

</body>

在随机数组完成后如何使用cookie使照片出现？

0 个答案: