zoukankan      html  css  js  c++  java
  • 前端小问题4

    爱、喜悦、和平。

    1、文字一个一个显示

    js代码

    <script type="text/javascript">
        window.onload=function(){
            var story = document.getElementById('sto');
            var s = document.getElementById('show');
            var a = story.innerHTML.slice("");
            var i = 0;
            timer=setInterval(function(){
                s.innerHTML=story.innerHTML.substring(0,i)
                i++;
                if(s.innerHTML==story.innerHTML){clearInterval(timer);};
            },500);
        }
    </script>
    

      

    html代码

    <p id="sto" style="display:none;">从前有座山,山里有座庙,庙里有个老和尚跟老尼姑,有一天....</p>
    <p id="show"></p>
    

      

    整体代码

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <script type="text/javascript">
            window.onload=function(){
                var story = document.getElementById('sto');
                var s = document.getElementById('show');
                var a = story.innerHTML.slice("");
                var i = 0;
                timer=setInterval(function(){
                    s.innerHTML=story.innerHTML.substring(0,i)
                    i++;
                    if(s.innerHTML==story.innerHTML){clearInterval(timer);};
                },500);
            }
        </script>
    </head>
    <body>
    <p id="sto" style="display:none;">从前有座山,山里有座庙,庙里有个老和尚跟老尼姑,有一天....</p>
    <p id="show"></p>
    </body>
    </html>
    

      

    demo

    2、style="visibility: hidden"和 style=“display:none”区别

    visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏)。  
    当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。  
    
    display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。  
    
    当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。  
    
    将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。
    
    最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)
    

    3、js跳转代码

    说明

    4、模态框(simplemodal.js)

    demo

    引入关键文件simplemodal.css 、 simplemodal.js

  • 相关阅读:
    BZOJ2821 作诗(Poetize) 【分块】
    BZOJ2724 蒲公英 【分块】
    Codeforces 17E Palisection 【Manacher】
    BZOJ2565 最长双回文串 【Manacher】
    Codeforces 25E Test 【Hash】
    CODEVS3013 单词背诵 【Hash】【MAP】
    HDU2825 Wireless Password 【AC自动机】【状压DP】
    HDU2896 病毒侵袭 【AC自动机】
    HDU3065 病毒侵袭持续中【AC自动机】
    HDU2222 Keywords Search 【AC自动机】
  • 原文地址:https://www.cnblogs.com/xyws/p/5121201.html
Copyright © 2011-2022 走看看