使用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 相关文章推荐
node在两个div之间移动,用ztree实现
Mar 06 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 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
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
php数组和链表的区别总结
2019/09/20 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
JS Array对象入门分析
2008/10/30 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
js脚本实现数据去重
2014/11/27 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
python爬虫之自制英汉字典
2019/06/24 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python搜索算法原理及实例讲解
2020/11/18 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
教师年度个人总结
2015/02/11 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Python循环之while无限迭代
2022/04/30 Python