前端小问题4
愛、喜悅、和平。
1、文字一個一個顯示
js代碼
<script type="text/javascript">window.οnlοad=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.οnlοad=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
轉載于:https://www.cnblogs.com/xyws/p/5121201.html
總結
- 上一篇： 计算机械效率的公式四种,物理计算公式;
- 下一篇： Aboutface3交互设计精髓笔记00