javascript练习24：微型阅览器_text-indent:0em-CSDN博客

本文链接：https://blog.csdn.net/weixin_56341412/article/details/128119634

<!DOCTYPE html>

<head>

<title>Document</title>

margin: 0;

padding: 0;

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

div{

position: absolute;

width: 300px;

height: 400px;

background-color: rgb(254, 194, 116);

left: 470px;

top: 34px;

}

text-indent: 2em;

padding: 0 6px;

font-size: 14px;

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

line-height: 23px;

}

img{

width: 20px;

height: 20px;

margin-top: 448px;

cursor:pointer;

}

button{

width: 20px;

height: 20px;

border-color: gray;

border-width: 1px;

border-radius: 10px;

cursor:pointer;

}

</style>

</head>

<body>

<div>

<h2 style="text-align:center;margin: 6px auto;">猪八戒吃西瓜</h2>

<p>有一天，天热极了。唐僧、孙悟空、猪八戒、沙和尚他们走得又累又渴，孙悟空说：“你们在这儿歇一会儿，我去摘点水果来给大家解解渴。”猪八戒连忙说：“太好了猴哥，真的能吃水果吗？要不然我跟你一块去，我也去！”他想：跟了孙悟空去，能早点吃到水果，还可多吃几个。</p>

<p>猪八戒跟着孙悟空，走呀，走呀，走了许多路，连个小酸梨也没找着。他心里不高兴了，就哎哟哎哟的叫起来。</p>

<p>孙悟空知道猪八戒偷懒，不去理他，就一个跟头翻到南海去摘水果了。</p>

<p>猪八戒，找了一棵大树下，正想睡一觉，忽然看见树旁边有一个绿油油的东西，走过去一看，哈哈，原来是个大西瓜！</p>

</div>

<p>他高兴极了，把西瓜切成了四块，自言自语地说：“第一块，给师父吃；第二块给孙悟空吃；第三块给沙和尚吃；第四块，嗯，是我的。”他张开大嘴巴，几口就把这块西瓜吃了。</p>

<p>“西瓜一块不够吃，我把孙悟空的那一块吃了吧。”他又吃了一块。</p>

<p>“西瓜真好吃，再吃一块也不算多，我把沙和尚的一块也吃了吧。”他又吃了一块，这下只留下唐僧的一块了。他捧起来，放下去，放下去，又捧起来，最后还是没忍住，把这块西瓜也吃了。</p>

<p>猪八戒一听，是孙悟空回来了，原来孙悟空在南海摘了蜜桃、甜枣、玉梨回来，正好看见猪八戒在切西瓜，就在云头上偷偷地瞧着呢。</p>

</div>

<p>猪八戒慌了，心想，我找到大西瓜自己吃了，要是让孙悟空知道，告诉了师父，这就糟了。他连忙拾起四块西瓜皮，把它们扔到了马路上，这才回答说：“我，我在儿呢！”孙悟空说：“我摘了些果子，咱们回去一起吃吧。”猪八戒说：“好的，好的。”</p>

<p>八戒刚走了几步，就摔了一跤，脸都跌肿了，低头一看，原来是一个西瓜皮。</p>

<p>孙悟空说：“是哪个懒家伙把西瓜皮乱丢，害得八戒摔了一跤！”</p>

<p>八戒和孙悟空继续往前走，啪嗒一下，八戒又摔了一跤。孙悟空说：“哎呀，又是哪个懒家伙偷吃了西瓜，把西瓜皮乱丢。”</p>

<p>八戒心想：怎么又踩上一块西瓜皮，真倒霉！可要小心点儿。他刚想到</p>

</div>

<p style="text-indent:0em;">这儿，忽然脚下一滑，又跌了一跤，孙悟空哈哈大笑，说：“八戒！你今天怎么尽摔跤？”八戒的脸越涨越红，一句话也讲不出。</p>

<p>总算走到了休息的地方，八戒心想：一路上摔了三跤，摔得我好苦啊。啪嗒，又是一下，八戒重重地摔在地上。</p>

<p>唐僧、沙和尚看见八戒脸上青一块、紫一块，肿了一大半，更加胖了。就问他是怎么回事，八戒结结巴巴地说：“我不该一个人吃了一个大西瓜，还乱丢西瓜皮，这一路上摔了四跤。”说得大家都笑了起来。</p>

</div>

</body>

var img=document.getElementsByTagName("img")

var div=document.getElementsByTagName("div")

var btn=document.getElementsByTagName("button")

//记录当前显示页

function fn(){

var page

for(var i=0;i<4;i++){

if(div[i].style.display!="none")

page=i

}

return page

}

//前翻页

img[0].οnclick=function(){

var page=fn()

if(page!=0){

div[page].style.display="none"

div[page-1].style.display="block"

}

//后翻页

img[1].οnclick=function(){

var page=fn()

if(page!=3){

div[page].style.display="none"

div[page+1].style.display="block"

}

btn[0].οnclick=function(){

for(var j=0;j<4;j++){

div[j].style.backgroundColor=btn[0].style.backgroundColor

}

btn[1].οnclick=function(){

for(var j=0;j<4;j++){

div[j].style.backgroundColor=btn[1].style.backgroundColor

}

btn[2].οnclick=function(){

for(var j=0;j<4;j++){

div[j].style.backgroundColor=btn[2].style.backgroundColor

}

</script>

</html>

QQ录屏20221127153622