js怎么点击文本框换文字就像一个聊天文字游戏一样,点击进行下一句对话?

JavaScript06

js怎么点击文本框换文字就像一个聊天文字游戏一样,点击进行下一句对话?,第1张

<div id="txt" value="" style="width:400pxheight: 300pxborder:1px solid red" >点击此处开始</div>

<script>

var clickIndex = 0

var textArray=["第一句话","第2句话","333","444","555"]

window.onload = function() {

var ts = document.getElementById("txt")

ts.onclick = function() {

if(clickIndex<textArray.length){

document.getElementById("txt").innerHTML = textArray[clickIndex]

clickIndex++

}else{

alert("结束")

}

}

}

</script>

你可以参考下面的代码来进行:

<!DOCTYPE HTML>

<html>

<head>

<title>yugi</title>

<meta charset=UTF-8 />

<style type="text/css">

</style>

<script type="text/javascript">

var LInserter =

{

start : 0,

end : 0,

isIE : function ()

{

return (!!window.ActiveXObject)

},

getPos : function (obj, whichone)

{

var me = LInserter

var pos = 0

var dir = whichone == "start" ? "StartToStart" : "StartToEnd"

if (me.isIE ())

{

var rangeSelection = document.selection.createRange ()

if (rangeSelection.parentElement ().id == obj.id)

{

if (obj.tagName.toLowerCase () == 'textarea')

{

var rangeBody = document.body.createTextRange ()

rangeBody.moveToElementText (obj)

}

else

{

var rangeBody = obj.createTextRange ()

}

for (pos = 0rangeBody.compareEndPoints (dir, rangeSelection) <0pos++)

{

rangeBody.moveStart ("character", 1)

}

for ( var i = 0i <= posi++)

{

if (obj.value.charAt (i) == "\n")

{

pos++

}

}

return (pos = whichone == "start" ? (me.start = pos) : (me.end = pos))

}

}

else

{

return (pos = whichone == "start" ? (me.start = obj.selectionStart) : (me.end = obj.selectionEnd))

}

},

insert : function (obj, params)

{

var me = LInserter

obj.value = obj.value.substring (0, me.start) + params + obj.value.substr (me.start)

return obj.value

}

}

</script>

</head>

<body>

<a href="javascript:" onclick="LInserter.insert(document.getElementById('conet'), '我我我我我我我我')">点我</a>

<a href="javascript:" onclick="LInserter.insert(document.getElementById('conet'), '他他他他他他他')">点他</a>

<textarea name="conet" id="conet" rows="14" cols="50" style="resize:none" onmouseup="LInserter.getPos(this, 'start')"></textarea>

</body>

</html>