广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何使用JS动态显示文本
  • 931
分享到

如何使用JS动态显示文本

2024-04-02 19:04:59 931人浏览 八月长安
摘要

这篇文章主要介绍了如何使用js动态显示文本,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。index.html:<!DOCTYPE&nb

这篇文章主要介绍了如何使用js动态显示文本,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

index.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" >
    <title>页面(HTML5)</title>
    <!-- 通过链接的方式使用 CSS -->
    <link rel="stylesheet" href="css/master.css" rel="external nofollow" />
    <script src="js/main.js" charset="utf-8"></script>
  </head>
  <body>
    <!-- HTML5 语义标签 -->
    <header>
      time is long, life is short
    </header>

    <main>
      <aside class="">
        aside
      </aside>
      <article class="">
        <input id="info" placeholder="输入内容">
        <!-- <input type="button" value="添加"> -->
        <button onclick="show()" type="button" name="button">添加</button>
        <h2 id="result">显示</h2>

      </article>
    </main>

    <footer>Copyright (c) 2016 Copyright Holder All Rights Reserved.</footer>

  </body>
</html>

main.js:

// 定义函数
function show() {
  // 获得id为info的input标签的内容
  var a = document.getElementById('info').value;
  // 显示,在id为result处动态显示(清除旧的显示新的)
  document.getElementById('result').innerText = a;

}

show函数封装在专门存放JS脚本代码的文件夹main.js,function是属于javascript的脚本语言函数。。。function是JavaScript语言中的关键词,也就是声明一个函数时使用的。 

demo:

如何使用JS动态显示文本如何使用JS动态显示文本

但是这个显示没有对齐输入框,可在CSS样式文件master.css中添加如此: 

如何使用JS动态显示文本

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用JS动态显示文本”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网VUE频道,更多相关知识等着你来学习!

--结束END--

本文标题: 如何使用JS动态显示文本

本文链接: https://www.lsjlt.com/news/68849.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用JS动态显示文本
    这篇文章主要介绍了如何使用JS动态显示文本,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。index.html:<!DOCTYPE&nb...
    99+
    2022-10-19
  • 怎么使用C# WinForm RichTextBox文本动态滚动显示文本
    这篇文章主要介绍“怎么使用C# WinForm RichTextBox文本动态滚动显示文本”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用C# WinForm&n...
    99+
    2023-07-05
  • html+js实现动态显示本地时间
    复制代码 代码如下: <span style="font-size:18px"><html> <span style="white-space:pre"...
    99+
    2022-11-15
    html 本地时间
  • C# WinForm RichTextBox文本动态滚动显示文本方式
    目录WinForm RichTextBox文本动态滚动显示文本方下图为运行时显示过程中Form1.csForm1.Designer.cs总结WinForm RichTextBox文本...
    99+
    2023-03-01
    C# WinForm C# WinForm RichTextBox RichTextBox文本动态滚动 RichTextBox显示文本
  • JS如何动态显示倒计时效果
    这篇文章主要为大家展示了“JS如何动态显示倒计时效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何动态显示倒计时效果”这篇文章吧。1.页面布局<h...
    99+
    2022-10-19
  • js如何实现动态显示时间效果
    这篇文章给大家分享的是有关js如何实现动态显示时间效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。示例代码如下:<!DOCTYPE HTML> ...
    99+
    2022-10-19
  • 如何使用text-overflow:ellipsis实现溢出文本省略号显示无需js
    本篇内容主要讲解“如何使用text-overflow:ellipsis实现溢出文本省略号显示无需js”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用tex...
    99+
    2022-10-19
  • javascript如何动态显示时间
    这篇文章主要为大家展示了“javascript如何动态显示时间”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript如何动态显示时间”这篇文章吧。 ...
    99+
    2022-10-19
  • TextView如何显示文本控件
    这篇文章将为大家详细讲解有关TextView如何显示文本控件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、简介也是TextView显示文本控件两种方法也是显示丰富的文本 二、方法 ...
    99+
    2023-05-30
    textview link
  • Linux如何使用文本浏览器lynx并显示中文
    小编给大家分享一下Linux如何使用文本浏览器lynx并显示中文,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!使用Fedora,当然需要玩一些酷的东东,lynx是在文本环境下不错的网页浏览工具,在网速不好的时候使用lynx...
    99+
    2023-06-12
  • 如何使用Vue.js动态地显示当天是星期几
    随着互联网的发展,前端技术也在不断地升级和更新。Vue.js作为一款现代化的JavaScript框架,被越来越多的开发者所使用。在Vue.js中,我们经常需要显示当前的日期和时间,尤其是当天是哪个星期几。本文将介绍如何使用Vue.js动态地...
    99+
    2023-05-14
  • 如何解决echarts在节点显示动态数据及添加提示文本所遇到的问题
    这篇文章给大家分享的是有关如何解决echarts在节点显示动态数据及添加提示文本所遇到的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。刚接触echarts不久,在使用过程中遇...
    99+
    2022-10-19
  • Python-使用matplotlib.pyplot实现实时数据动态显示
    目录 一、引言 二、从一块代码开始 1、%matplotlib qt5 2、plt.icon 三、另一种在行内(Jupyter Notebook内)展示动态图形的方法 1、display和display.clear_output() 一...
    99+
    2023-09-01
    python 信息可视化 开发语言
  • jQuery如何动态改变图片显示大小
    小编给大家分享一下jQuery如何动态改变图片显示大小,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!当我们要显示后台传过来若干个...
    99+
    2022-10-19
  • 如何使用JS动态构建目录树
    本篇文章给大家分享的是有关如何使用JS动态构建目录树,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。在使用frameset布局的时候,经常会用到目录树,我们可以把一棵树写死,但是...
    99+
    2023-06-26
  • linux系统怎么用命令行动态显示文件内容
    本篇内容主要讲解“linux系统怎么用命令行动态显示文件内容”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“linux系统怎么用命令行动态显示文件内容”吧!一般情况下,WEB系统中的服务日志都是文...
    99+
    2023-06-13
  • 使用Ajax怎么动态显示并操作表信息
    这篇文章将为大家详细讲解有关使用Ajax怎么动态显示并操作表信息,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。js文件内容如下:$(function () { ...
    99+
    2023-06-08
  • js如何实现做通讯录的索引滑动显示效果和滑动显示锚点效果
    小编给大家分享一下js如何实现做通讯录的索引滑动显示效果和滑动显示锚点效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!第一个是...
    99+
    2022-10-19
  • vue如何动态实时的显示时间浅析
    vue动态实时显示时间有两种方法 1.可以用day.js,处理日期和时间的js库 用法 npm install dayjs --save 引入import dayjs from 'd...
    99+
    2022-11-12
  • wps文本框太小文字无法显示如何解决
    若WPS文本框太小,无法显示完整的文字,可以尝试以下解决方法:1. 调整文本框大小:在文本框上右键单击,选择“大小和属性”或类似选项...
    99+
    2023-09-29
    wps
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作