使用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 相关文章推荐
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
TypeScript高级用法的知识点汇总
Dec 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
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
php工具型代码之印章抠图
2018/07/18 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
化学教学随笔感言
2014/02/19 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers