滑動留白
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
#box {
width: 100%;
height: 2000px;
background: linear-gradient(to bottom, #98a, #aef);
</style>
</head>
<body>
<div id="app">
<div id="box">
<h2><a href="http://www.baidu.com/s?wd=友善面">蘭亭集序</a></h2>
<div>作者: <input type="text"></div>
<p>
永和九年，歲在癸醜，暮春之初，會于會稽山陰之蘭亭，修禊事也。群賢畢至，少長鹹集。此地有崇山峻嶺，茂林修竹，又有清流激湍，映帶左右，引以為流觞曲水，列坐其次。雖無絲竹管弦之盛，一觞一詠，亦足以暢叙幽情。
是日也，天朗氣清，惠風和暢。仰觀宇宙之大，俯察品類之盛，是以遊目騁懷，足以極視聽之娛，信可樂也。
夫人之相與，俯仰一世。或取諸懷抱，悟言一室之内；或因寄所托，放浪形骸之外。雖趣舍萬殊，靜躁不同，當其欣于所遇，暫得于己，快然自足，不知老之将至；及其所之既倦，情随事遷，感慨系之矣。向之所欣，俯仰之間，已為陳迹，猶不能不以之興懷，況修短随化，終期于盡！古人雲：“死生亦大矣。”豈不痛哉！
每覽昔人興感之由，若合一契，未嘗不臨文嗟悼，不能喻之于懷。固知一死生為虛誕，齊彭殇為妄作。後之視今，亦猶今之視昔，悲夫！故列叙時人，錄其所述，雖世殊事異，是以興懷，其緻一也。後之覽者，亦将有感于斯文。
</p>
</div>
<script>
var app = document.queryselector('#app');
var p = document.queryselector('p');
var input = document.queryselector('input');
//阻止浏覽器的預設行為
app.addeventlistener('touchstart', function (e) {
e.preventdefault();
});
//擷取a連結
var a = document.queryselector('a');
a.addeventlistener('touchstart', function (e) {
//阻止冒泡
e.stoppropagation();
//
p.addeventlistener('touchstart', function(e){
input.addeventlistener('touchstart', function(e){
this.focus();
app.addeventlistener('touchstart', function(){
//喪失焦點
input.blur();
</script>
</body>
</html>
![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)