使用JS动态显示文本

 更新时间:2017年09月09日 10:38:17   转载 作者:Lawliet_ZMZ  
这篇文章主要为大家详细介绍了使用JavaScript动态显示文本,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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:

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

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

相关文章

  • jquery实现select下拉框美化特效代码分享

    jquery实现select下拉框美化特效代码分享

    这篇文章主要介绍了jquery实现select下拉框美化特效,实现效果简洁大方,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • JS案例分享之金额小写转大写

    JS案例分享之金额小写转大写

    这篇文章主要介绍了JS金额小写转大写的方法,需要的朋友可以参考下
    2014-05-05
  • 详解微信小程序图片地扯转base64解决方案

    详解微信小程序图片地扯转base64解决方案

    这篇文章主要介绍了详解微信小程序图片地扯转base64解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 利用ES6实现单例模式及其应用详解

    利用ES6实现单例模式及其应用详解

    单例是在程序设计非常基础的东西,这篇文章主要给大家介绍了关于利用ES6实现单例模式及其应用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-12-12
  • JS+CSS实现模仿浏览器网页字符查找功能的方法

    JS+CSS实现模仿浏览器网页字符查找功能的方法

    这篇文章主要介绍了JS+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 超全面的JavaScript开发规范(推荐)

    超全面的JavaScript开发规范(推荐)

    作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题。本文就主要介绍了关于Javascript的命名规范、注释规范以及框架开发的一些问题,需要的朋友可以参考学习。
    2017-01-01
  • JavaScript闭包原理与用法实例分析

    JavaScript闭包原理与用法实例分析

    这篇文章主要介绍了JavaScript闭包原理与用法,结合实例形式分析了javascript闭包的概念、功能、常见问题及相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • canvas的神奇用法

    canvas的神奇用法

    canvas有一个神奇的方法getImageData,它可以获取canvas内图像的每一个像素点的颜色值获取,而且可以改变。本文将对canvas实现图片的滤镜转化的方法进行介绍,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 微信小程序开发之IOS和Android兼容的问题

    微信小程序开发之IOS和Android兼容的问题

    这篇文章主要介绍了微信小程序开发之IOS和Android兼容的问题的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • JavaScript 复制对象与Object.assign方法无法实现深复制

    JavaScript 复制对象与Object.assign方法无法实现深复制

    这篇文章主要介绍了JavaScript 复制对象与Object.assign方法无法实现深复制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论