使用JS动态显示文本


Posted in Javascript onSeptember 09, 2017

本文实例为大家分享了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>
        <h1 id="result">显示</h1>

      </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动态显示文本

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
vue实现列表的添加点击
Dec 29 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
深入理解ES7的async/await的用法
Sep 09 #Javascript
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 #Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 #Javascript
js实现音乐播放控制条
Sep 09 #Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 #Javascript
详解vue2 $watch要注意的问题
Sep 08 #Javascript
You might like
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php画图实例
2014/11/05 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python分割指定页数的pdf文件方法
2018/10/26 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
出纳员岗位责任制
2014/02/11 职场文书
研修第一天随笔感言
2014/02/15 职场文书
大学应届生的自我评价
2014/03/06 职场文书
挂职学习心得体会
2014/09/09 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
python基础之停用词过滤详解
2021/04/21 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers