0

我在 HTML、CSS 等方面进行了一些练习。我做了一点点代码。

在此代码中，您可以在文本框中书写，按下按钮，您所写的内容将出现在下方。您可以随心所欲地写，但在屏幕上我们只能看到最后三条消息。

所有代码都在这个 jsfiddle 中。

JavaScript 代码：

$(document).ready(function(){

$("#send").click(function(){
    var removed = false;
    var d = new Date();

    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var day = d.getDate();

    var outputDate = ((''+day).length<2 ? '0' : '') + day + '/' +
        ((''+month).length<2 ? '0' : '') + month + '/' +
         year ;

           var outStr = ((''+d.getHours()).length<2 ? '0' : '') + d.getHours() +':'+
        ((''+d.getMinutes()).length<2 ? '0' : '') + d.getMinutes();

    $(".element").animate({
        top:'+=3%'
    } , 400,  function(){
        if(removed == false)
    {
            removed=true;
            $('.third').remove();
            var temp1 = $('.first').html();
            var temp2 = $('.second').html();

            $('.first').remove();

            $('.elements .second').before('<div class="element first">'+
                '<img id="image" src="images/Picture.png">'+
                '<p class="date" >'+ outputDate +'</p>'+
                '<p class="time" >'+ outStr +'</p>'+
                '<p class="output" >'+ $('#input1').val()+
                '<p class="name" >'+ "Nina Pnina"+'</p>'+
                '</div>');

            $('.second').html(temp1);
            $('.elements .second').after('<div class="element third">'+temp2+'</div>');

        }
    $(".element").removeAttr("style");
        //$(".second").css("top","3%");
    });

  });
});

function clearContents(element) {
  element.value = '';
}

现在它在我的电脑上是本地的，所以照片不会出现在 jsfiddle 中，但这是可以理解的。

现在我想做得更好，所以当发送新消息时，它会淡入，而不仅仅是弹出到屏幕上。

我的第二个问题是，当我在笔记本电脑上查看它时，所有的代码都是一团糟，我想这是因为分辨率。有谁知道我怎样才能让自动收报机适用于所有分辨率？

谢谢！

4

1 回答 1

1

使用 jquery .fadeIn()：http ://api.jquery.com/fadeIn/

您将其应用于创建的元素，例如：

$(".element").fadeIn('slow');

这取决于你想要淡入淡出等等。我编辑了你的小提琴：http: //jsfiddle.net/addiktedDesign/2mDmC/3/

并添加$(".first").fadeIn('slow');

以及隐藏添加的元素（显示：无；）：$('.elements .second').before('<div class="element first" style="display:none;">'

关于分辨率，我想你的意思是屏幕尺寸，背景是图像，所以有点复杂，如果你使用 css 渐变或纯色并使用宽度百分比等会更好。

于 2013-06-03T09:25:19.360 回答