Question

我是一所美术学校的（法国）学生，我在这个项目中制作一个关于记忆的项目，计算机需要忘记你写的文字......

我知道html和css，但我刚刚开始使用javascript ...

我需要在文本区域中随意更改或删除一些字母（或某些单词）;就像你正常地写你的文字一样，当你写了5行文字时，第一行开始改变：一些字母改变（A变成F或M）或者一些字母被删除......而文本没有任何意义。但作家们并没有看到这种变化，它必须非常谨慎（不透明度的变化缓慢或类似的东西。）

感谢您的帮助！

Answer 1

欢迎来到SO！你的项目听起来很有趣在SO上，我们要求您提出具体的问题。您已收到几张投票，因为您的问题是开放式的。所以为了帮助你开始，我会给你这些想法。

您无法在textarea中运行动画效果。您当然可以更改内容，但在用户键入时这样做可能效果不佳。
话虽如此，也许用户可以键入文本区域，但实际内容会被复制到其他地方的div中。
动画效果需要在元素上进行。要淡出单个字母，你必须将它们包裹在一个范围内。
这实际上非常复杂，所以请尝试逐个问你的问题。从您的主要问题开始，然后提供一个关于您要完成的内容的简短段落。
以下是一些有助于您入门的基础知识。

http://jsfiddle.net/6Btxb/

<div id="content">&nbsp;</div><br />
<input type="text" /><br />
Key Pressed: <div id="keycode"></div>
<button>Fade out and change a letter</button>

$('input').keyup(function(e) {
    //in javascript you are returned a keycode as opposed to the actual 
    //letter pressed. So to work with all languages
    //I monitor keyup instead. But this means you have to clear the textarea as 
    //the user types    
    //show the keycode of the pressed key
    $('#keycode').html(e.keyCode);

    //append the typed letter to the content div
    //do you need to handle delete / cut and paste?
    $('#content').append('<span>' + $(this).val() + '</span>');

    //clear textbox
    $(this).val('');
});

$('button').click(function() {
    //find how many spans are in the content div
    var spanCount = $('#content span').length;
    //get the index of a random letter
    var randomNum = randomFromTo(0, spanCount);
    //create a random letter
    $('#content span').eq(randomNum).fadeOut(1000, function() {
        //this is a callback to the fade out animation
        //change the letters value
        $(this).html(randomLetter());
        //fade back in
        $(this).fadeIn(1000);
    });
});

//generate random number between 
function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function randomLetter() {
    var letters = 'abcdefghijklmnopqrstuvwxyz';
    return letters [Math.floor(Math.random()*letters .length)];
}

jquery - javascript - 美术学校的项目

1 个答案: