zoukankan      html  css  js  c++  java
  • 用JS动态显示文本

    index.html:

    <!DOCTYPE html>
    <html lang="zh">
        <head>
            <meta charset="utf-8" >
            <title>页面(HTML5)</title>
            <!-- 通过链接的方式使用 CSS -->
            <link rel="stylesheet" href="css/master.css" />
            <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中添加如此:


  • 相关阅读:
    学习进度(第十四周)
    学习进度(第十三周)
    程序员修炼之道阅读笔记03
    程序员修炼之道阅读笔记02
    学习进度(第十二周)
    冲刺进度条10
    冲刺进度条09
    冲刺进度条08
    寒假学习进度报告2
    寒假学习进度报告1
  • 原文地址:https://www.cnblogs.com/zhangmingzhao/p/7256715.html
Copyright © 2011-2022 走看看