`

简单倒叙留言板

阅读更多

今天写了一个简单的留言板,评论是倒叙插入的。先上代码,然后说一下遇到的问题。

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="controller.js"></script>
    <title>留言板</title>
</head>
<body>
<div class="name">
    <p>昵称:<input id = input_one></p>
</div>
<div class="content">

    <div class="content_title">内容:</div><textarea id="input_two"></textarea>

</div>
<button type="button" class="submit" onclick="showMessage()">提交留言!</button>
<div class="leave_message">
    <h3 class="submit_title">留言列表</h3>
    <hr>
</div>
<ul id="list">
</ul>
<p class="thanks">感谢留言!</p>
</body>
</html>

 js部分:

function showMessage(){
    var name = document.getElementById("input_one").value;
    var message = document.getElementById("input_two").value;
    var newItem=document.createElement("p");
    var messageTxt=document.createTextNode(name + ":" + message);
    newItem.appendChild(messageTxt);
    var list=document.getElementById("list");
    list.insertBefore(newItem,list.childNodes[0])
    document.getElementById("input_one").value = "";
    document.getElementById("input_two").value = "";

}

 css部分:

.name {
    margin-top: 100px;
}
.content {
    margin-top: 20px;
}
.submit {
    margin-left: 463px;
}
#input_one {
    width: 500px;
}
#input_two {
    width: 500px;
    height: 150px;
}
.submit_title {
}
.leave_message {
    width: 540px;
}
body{
    position:absolute;
    left: 200px;
}
.thanks{
    margin-left: 466px;
}
.list{
    width: 500px;
    list-style: none;
}
.content_title {
    float: left;
}

 主要遇到问题,倒叙插入用insertbefore。

主要锻炼了对dom的操作。

 

 

分享到:
评论

相关推荐

    倒叙读文本文件

    实现倒叙以行读文本,只读取最后一行使用的是RandomAccessFile 类

    用泛型List倒叙打印

    用泛型List倒叙打印,就是说获取集合中的 key,value值的方法

    Python练习程序_Python倒叙_

    Python中,可以简单地通过切片操作来实现字符串的倒序。例如,如果你有一个字符串`str = "Hello"`,你可以使用`str[::-1]`来获取它的倒序,结果为`"olleH"`。这适用于所有字符串,包括那些在`倒叙.py`文件中可能...

    字符倒叙输出

    c++简单入门练习

    链表操作注意顺序法和倒叙法

    注意创建链表时,顺序法和倒叙法的不同。注意创建链表时,顺序法和倒叙法的不同。

    倒叙数字输出.cpp

    把一个整数以字符形式倒序输出,例如a=234当while(a!=0)a关于10循环求余,并输出,循环一次除以10,当a=0时结束循环,得到结果432

    倒叙猜数字.7z,猜数字游戏

    《倒叙猜数字游戏》是一款旨在锻炼用户记忆力的程序,通过让玩家记住并倒序输出随机生成的数字序列,挑战其大脑的反应速度和记忆力。本文将深入解析这个项目的相关知识点,帮助新手学习编程和理解代码结构。 1. **...

    倒叙输出.c

    倒叙输出.c

    c语言指针倒叙编程代码

    指针倒叙 #include "stdio.h" #include "conio.h" main() { int a[10]={0,1,2,3,4,5,6,7,8,9},i; int *p=&a[0],*q=&a[9]; int temp; for(i=0;i;i++) printf("%d",a[i]); printf("\n"); while (p) { temp=*p; *p=...

    oc-数组倒叙

    在Objective-C(简称OC)中,数组是一种常用的数据结构,用于存储多个有序的元素。当你需要将数组中的元素顺序反转,即实现数组的倒序,可以采用多种方法。本篇文章将详细讲解如何在OC中实现数组倒序的操作。...

    倒叙输出整数

    倒叙输出整数 倒叙输出整数 倒叙输出整数!

    插叙和倒叙的区别.pdf

    在文学创作和叙事技巧中,插叙和倒叙都是常用的手法,它们通过改变叙述顺序,为故事增添深度和层次感。接下来,我们将详细探讨这两种叙述方式的特点、用途及其区别。 首先,插叙(Insertion)是一种在主线叙事中...

    C++容器栈编的倒叙程序

    用栈编写的整数倒叙程序,支持多为整数直接倒叙。

    GridView 实现行号倒叙排列,

    ### GridView 实现行号倒叙排列知识点详解 #### 一、概述 在开发Web应用程序时,经常需要使用到`GridView`控件来展示数据表格。为了提高用户体验和数据展示的灵活性,有时我们需要对`GridView`中的行号进行特殊处理...

    整数的倒叙

    整数的倒叙

    句子的作用插叙倒叙的作用PPT课件.pptx

    【句子的作用】 句子在一篇文章中的作用至关重要,它既是作者思想的载体,也是读者理解文章的关键。句子的作用可以从内容和结构两个方面进行分析。 【内容方面】 1. 开头段落的句子往往承担着开篇点题的任务,通过...

    倒叙特写式开头公开课教学教案.doc

    部分学生无法将倒叙手法自然地融入写作,或者只是简单地将事件结局提前,导致上下文过渡生硬。因此,课程的目标是帮助他们改进这些问题。 【教学目标】 1. 学生需要理解倒叙的概念,知道它是如何在文章中创造效果的...

    28-Infer倒叙递归.ts

    28-Infer倒叙递归

    B.rar_倒叙输出

    标题"B.rar_倒叙输出"所指的知识点主要集中在编程领域,特别是低级语言如汇编语言中的字符处理和屏幕输出。在这个问题中,我们关注的是如何设计一个程序,它能够接收用户输入的字符,并实时地把这些字符以倒序的方式...

    C#文本文件的倒叙输入实例

    VS.net C# 文本文件的倒叙输入实例源码。

Global site tag (gtag.js) - Google Analytics