滑动留白
<!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=)