js如何制作简单的发布功能-js教程-PHP中文网

首页

web前端

js教程

js如何制作简单的发布功能

小云云

Mar 17, 2018 pm 04:58 PM

javascript 功能发布

本文主要和大家分享js如何制作简单的发布功能，主要以代码的形式和大家分享，希望能帮助到大家。

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            .showMessage{
                background-color: #ccc;
                margin-top: 12px;
                padding:20px;
                border-radius: 8px;
            }
        </style>
    </head>
    <body>
        <p class="container" style="padding-top:50px;">
            <p class="col-md-3 message">
                <input type="" class="form-control" name="" id="inpText" placeholder="请输入标题">
                <textarea class="form-control" rows="10" style="margin-top: 20px" id="textaText" placeholder="请输入内容"></textarea>
                <button class="btn btn-primary" style="margin-top:20px " id="button01">提交</button>
            </p>
            <p class="col-md-9 mainMessage" id="right">
                <p class="showMessage">
                    <i>模板</i>
                    <h3 class="MT">标题</h3>
                    <p class="MC">这里是内容</p>
                </p>
            </p>
        </p>
    </body>
</html>

登录后复制

js:

<script type="text/javascript">
        window.onload = function(){
        $(&#39;#button01&#39;).click(function(){
            var inpText = document.getElementById(&#39;inpText&#39;).value;//获取值
            var textaText = document.getElementById(&#39;textaText&#39;).value;//获取值    
            var right = document.getElementById(&#39;right&#39;);
            var p = document.createElement(&#39;p&#39;);//创建一个p
            p.className = &#39;showMessage&#39;;
            var h3 = document.createElement(&#39;h3&#39;);//创建一个h3
            h3.className = "MT";//设置类名
            p.appendChild(h3);//将h3添加到p
            h3.innerHTML = inpText;
            
            var p = document.createElement(&#39;p&#39;);//创建一个p
            p.innerHTML = textaText;
            p.className = "MC";
            p.appendChild(p);
            right.appendChild(p);
            })
        }
</script>

登录后复制

观察上面js部分：

 var inpText = document.getElementById(&#39;inpText&#39;).value;//获取值
 var textaText = document.getElementById(&#39;textaText&#39;).value;//获取值

登录后复制

这两行代码不能放到下面代码前面

 $(&#39;#button01&#39;).click(function(){}

登录后复制

假设我放在前面，页面加载完成之后就开始执行以下两行代码，会发现获取的值是空的，所以要放在点击函数里面，点击按钮了才开始获取input和textarea里面的值。（这里我假设你在写代码之前没有给这两个标签赋值）；

 var inpText = document.getElementById(&#39;inpText&#39;).value;//获取值
 var textaText = document.getElementById(&#39;textaText&#39;).value;//获取值

登录后复制

还有的话就是创建的三个标签：

 var p = document.createElement(&#39;p&#39;);//创建一个p
 var h3 = document.createElement(&#39;h3&#39;);//创建一个h3
 var p = document.createElement(&#39;p&#39;);//创建一个p

登录后复制

一定要加入到HTML的节点当中。

p.appendChild(h3);//将h3添加到p
p.appendChild(p);
right.appendChild(p);

登录后复制

此外还可以做一个发布后的增删查改。发挥你们的想象力吧。最后~谢谢阅读本文~

以上是js如何制作简单的发布功能的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7649

CakePHP 教程

1392

steam的账户名称是什么格式

win11激活密钥永久

NYT迷你填字游戏答案

110

显示更多

Related knowledge

为什么小红书发布不了作品视频？它要怎么发布自己的作品？ Mar 21, 2024 pm 06:36 PM

随着社交媒体的迅速发展，短视频平台已成为许多用户展示自我、分享生活的主要渠道。在小红书发布作品视频时，许多用户可能会遇到各种问题。本文将讨论可能导致小红书作品视频发布失败的原因，并提供正确的发布方法。一、为什么小红书发布不了作品视频？小红书平台偶尔会发生系统故障，可能是由于系统维护或升级等原因造成的。在这种情况下，用户可能会遇到无法发布作品视频的问题。用户需要耐心等待平台恢复正常后再尝试发布。网络连接不稳定或速度缓慢可能会妨碍用户在小红书上发布作品视频。用户应当确认自己的网络环境，确保连接稳定且

小红书怎么发布作品小红书怎么发布文章和图片 Mar 22, 2024 pm 09:21 PM

　　小红书你们可以查看到各种的内容，为你带来多样的帮助，让你发现更美好的生活，你有什么想要分享的话，也是可以在这里发布的，让大家都可以看一看，同时还能够为自己带来收益，非常的划算，有不懂怎么在这里发作品的，都可以查看教程，每天都可以使用这个软件，发布各种内容，帮助大家们更好的使用起来，有需要的都不要错过了！　　1、打开小红书，点击下方加号图标。　　2、这里有【视频】【图片】【实况图】选择；选择想要发布的内容点击勾选。　　3、在内容编辑页选择【下一步】。　　4、输入您想要发布的文字内容点击【发布笔

为什么小红书发布不出去？小红书发布内容无法展示怎么办？ Mar 21, 2024 pm 07:47 PM

小红书作为一款生活方式分享平台，吸引了大量用户在此分享生活点滴、种草商品。不少用户反映，自己的发布内容无法展示，这究竟是怎么回事呢？本文将分析可能导致小红书发布不出去的原因，并给出解决办法。一、为什么小红书发布不出去？小红书执行严格的社区准则，对于发布广告、垃圾信息、低俗内容等行为持零容忍态度。如果用户的内容违反规定，系统会进行拦截，导致内容无法展示。小红书要求用户发布高质量、有价值的内容，内容需要具有独特性和新意。如果内容过于普通、缺乏创新，可能无法通过审核，从而无法在平台上展示。3.账号异常

vivox100s和x100区别：性能对比及功能解析 Mar 23, 2024 pm 10:27 PM

vivox100s和x100手机都是vivo手机产品线中的代表机型，它们分别代表了vivo在不同时间段内的高端技术水平，因此这两款手机在设计、性能和功能上均有一定区别。本文将从性能对比和功能解析两个方面对这两款手机进行详细比较，帮助消费者更好地选择适合自己的手机。首先，我们来看vivox100s和x100在性能方面的对比。vivox100s搭载了最新的

小红书几点发布效果最好？它从哪里发布流量推荐最多？ Mar 21, 2024 pm 08:11 PM

在当今的社交网络时代，小红书已经成为年轻人分享生活、获取资讯的重要平台。许多用户希望通过在小红书上发布内容，吸引更多的关注和流量。那么，什么时间发布内容效果最好呢？本文将详细探讨小红书发布时间的选择以及流量推荐最多的发布位置。一、小红书几点发布效果最好？小红书发布内容的最佳时机通常是在用户活跃度较高的时间段。根据小红书用户的特点和行为习惯，有几个时间段是比较适宜的。在晚上7点到9点这个时间段，大多数用户已经下班回到家，开始使用手机浏览内容，寻找放松和娱乐。因此，在这个时段发布的内容更有可能引起用

小红书发布怎么删除？发布删除怎么恢复？ Mar 21, 2024 pm 05:10 PM

小红书作为一家流行的社交电商平台，吸引了大量用户分享生活点滴和购物心得。有时候我们可能会不经意发布一些不合适的内容，这时候需要及时删除，这样可以更好地维护个人形象或者遵守平台规定。一、小红书发布怎么删除？1.登录小红书账号，进入个人主页。2.在个人主页下方，找到“我的创作”选项，点击进入。3.在“我的创作”页面，你可以看到所有发布的内容，包括笔记、视频等。4.找到需要删除的内容，点击右侧的“...”按钮。5.在弹出的菜单中，选择“删除”选项。6.确认删除后，该条内容将从你的个人主页和公共页面消失

小红书app如何进行发布作品呢小红书app五分钟发布作品的教程 Mar 12, 2024 pm 05:10 PM

　　小红书app如何进行发布作品呢？很多的小伙伴们都知道在这款软件里面有着大量的创作作品以及强大的交友圈子。对于刚接触这款软件的用户们估计还不知道怎么进行发布作品吧，让更多的人去观看另一面的你。如果你还不知道怎么去发布里面的作品，那就赶紧参考一下又本站中的小编所推荐的小红书app五分钟发布作品的教程。小红书app五分钟发布作品的教程　　1.点击【三】　　如图所示，点击左上方红箭头所指的【三】。　　2.点击【创作中心】　　如图所示，点击红箭头所指的【创作中心】。　　3.点击【去发布】　　如图所示，

如何发布小红书视频作品？发视频要注意什么？ Mar 23, 2024 pm 08:50 PM

随着短视频平台的兴起，小红书成为了许多人分享生活、表达自我、获取流量的平台。在这个平台上，发布视频作品是一种非常受欢迎的互动方式。那么，如何发布小红书视频作品呢？一、如何发布小红书视频作品？首先，确保准备好一段适合分享的视频内容。你可以利用手机或其他摄像设备进行拍摄，需要注意画质和声音的清晰度。2.剪辑视频：为了让作品更具吸引力，可以对视频进行剪辑。可以使用专业的视频剪辑软件，如抖音、快手等，添加滤镜、音乐、字幕等元素。3.选择封面：封面是吸引用户点击的关键，选择一张清晰、有趣的图片作为封面，让

See all articles

js如何制作简单的发布功能

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题