- 建立一个多行文本框，
一个文本框，
一个叫阅读的按钮
<body>
<textarea id="wenben"></textarea><br>
<input type="text" id="n">
<input type="button" value="阅读"οnclick="yuedu()">
</body>
- 给多行文本框加宽高，背景色
给多行文本框加宽，边框样式（边框粗细，实线，颜色，边框弧度），字体颜色
<style>
textarea{
width: 390px;
height: 100px;
background-color: #f4e0bf;
}
input{
width: 195px;
border: 1px solid yellowgreen;
border-radius: 10px;
color: rgb(97, 97, 224);
}
</style>
- 设置一个索引index，
创建一个数组，
分别存储属性值
让id为n的input输出共有几条索引
当点击0次阅读下一条时，显示第0条，以此类推。
<script>
var i=0;
var arr = new Array();
arr[0]="认真生活就能找到生活里藏起来的糖果。";
arr[1]="努力的最大意义是让自己随时有能力跳出自己厌恶的圈子。";
arr[2]="愿你以渺小启程以伟大结束";
document.getElementById("n").value='共有'+arr.length+"条";
function yuedu(){
if(i<arr.length)
{
document.getElementById("wenben").value=arr[i];
i++;
}
else{
document.getElementById("wenben").value="这已经是最后一条消息了！";
}
}
</script>
那么有疑惑了，求有心人解答一下:
- 为什么第一个input文本框没有显示内容
- 怎么样让第一条文字在点击0次阅读下一条的时候显示出来
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
</head>
<style>
textarea{
width: 390px;
height: 100px;
background-color: #f4e0bf;
}
input{
width: 195px;
border: 1px solid yellowgreen;
border-radius: 10px;
color: rgb(97, 97, 224);
}
</style>
<script>
var i=0;
var arr = new Array();
arr[0]="认真生活就能找到生活里藏起来的糖果。";
arr[1]="努力的最大意义是让自己随时有能力跳出自己厌恶的圈子。";
arr[2]="愿你以渺小启程以伟大结束";
document.getElementById("n").value='共有'+arr.length+"条";
function yuedu(){
if(i<arr.length)
{
document.getElementById("wenben").value=arr[i];
i++;
}
else{
document.getElementById("wenben").value="这已经是最后一条消息了！";
}
}
</script>
<body>
<textarea id="wenben"></textarea><br>
<input type="text" id="n">
<input type="button" value="阅读下一条"οnclick="yuedu()">
</body>
</html>
结果：
568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
