使用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
Mar 09 Javascript
JS的数组的扩展实例代码
Jul 09 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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学习之简单计算器实现代码
2011/06/09 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
java script编程起步(第三课)
2007/01/10 Javascript
javascript Object与Function使用
2010/01/11 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
Angular模板表单校验方法详解
2017/08/11 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
临床医学大学生求职信
2013/09/28 职场文书
外贸主管求职简历的自我评价
2013/10/23 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
调任通知
2015/04/21 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
SQL Server 中的事务介绍
2022/05/20 SQL Server