1

配列を使用してJavaScriptでタイプライター効果を作ろうとしています。最初に、配列に文字列をハードコーディングしたところ、効果が適切に機能しました。後で、ユーザー入力で同じことを試みましたが、うまくいきませんでした。

これはハードコードされたバージョンです:

<html>
<head>
<script type="text/javascript">
var arr=new Array()
var start=0;
var end=start + 1;
arr[0]="Hello";
function write()
{
    setTimeout(function() {
        document.body.innerHTML=document.body.innerHTML + arr[0].slice(start,end);
        start++;
        end=start + 1;
        if (start < 5) {
            write();
        }
    }, 500);
}
onload=write();
</script>
</head>
<body>
</body>
</html>

これは、ユーザー入力を取得しようとしているバージョンです。

<html>
<head>
<script type="text/javascript">
var arr=new Array()
var start=0;
var end=start + 1;
arr[0]=document.getElementById('word').innerHTML;
function write()
{
    setTimeout(function() {
        document.body.innerHTML=document.body.innerHTML + arr[0].slice(start,end);
        start++;
        end=start + 1;
        if (start < 5) {
            write();
        }
    }, 500);
}
</script>
</head>
<body>
<input type="text" value="Hello World" id="word">
<br>
<a href="javascript:write()">Click</a>
</body>
</html>

ユーザー入力のあるバージョンが適切に機能するように、コーディングにどのような変更を加える必要があるか教えてください。

4

3 に答える 3

2

valueの代わりにプロパティを使用しinnerHTMLます。

arr[0]=document.getElementById('word').value;

そしてwrite、要素が存在する前ではなく、リンクがクリックされたときに値を取得できるように、それを関数内に配置します。

于 2012-08-12T07:55:14.543 に答える
0

要するに: 通常 - 入力 (select、textarea、radio などを含む) の現在の値を取得するには、属性値から取得し、innerHTML を他の値から取得します。

配列を使用する必要はありません :) 同じ効果で、はるかに少ない数を書くことができます。

// `str` is the string to write to on `target` element.
function write(str, target){


  var attr = ~"input,textarea".indexOf( target.tagName.toLowerCase() )? 'value' : 'innerHTML',
  //attr - element attribute which contains its value/html
  //if it isn't a input or textarea `attr` should be innerHTML;

  start=0,
  interval = setInterval(function() {
        target[attr] += str.substr(start++,1); //get one character starting from `start` 
        if( start >= str){
            clearInterval( interval );
        }
    }, 500);
  target[attr]  = ''; //clear the current text on target element.
};
write('hello', document.getElementById('word') ); 
//  write('hello', document.body );
于 2012-08-12T10:10:41.810 に答える
0 
<html>
<head>
<script type="text/javascript">
var arr=new Array()
var start=0;
var end=start + 1;
arr[0]="Hello";
function write()
{
    setTimeout(function() {
        //document.body.innerHTML=document.body.innerHTML + arr[0].slice(start,end);
        document.getElementById("word").value=document.getElementById("word").value + arr[0].slice(start,end);
        start++;
        end=start + 1;
        if (start < 5) {
            write();
        }
    }, 500);
}
onload=write();
</script>
</head>
<body>
<input type="text" value="" id="word">
</body>
</html>
于 2012-08-12T08:12:05.630 に答える