JS的文本同步框

简介: JS的文本同步框

简介:JS写一个文本同步框,来入门js。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <textarea class="input" name="" id="" cols="30" rows="10"></textarea>
    <br>
    <button>Run</button>
    <br>
    <pre></pre>
    <script type="module">
        import {
            main
        } from "/js/index.js";
        main();
    </script>
</body>
</html>

index.css

textarea {
    width: 500px;
    height: 300px;
    background-color: lightblue;
    font-size: 24px;
}
pre {
    width: 500px;
    height: 300px;
    background-color: lightgrey;
    font-size: 24px;
}

index.js

let input = document.querySelector(".input");
let run = document.querySelector("button");
let output = document.querySelector("pre");
function main(){
    run.addEventListener ("click", function(){
        // 点击run可以把input类中的内容显示出来的例子
        let s = input.value;
        output.innerHTML = s;
    });
}
export {
    main
}

结果显示:

相关文章
|
5月前
|
前端开发 JavaScript UED
深入理解 JavaScript 同步和异步,让网页灵动起来!
深入理解 JavaScript 同步和异步,让网页灵动起来!
|
2月前
|
JavaScript 前端开发 API
【前端开发】JS同步与异步调用,Vue2基础知识
本文简要介绍了JavaScript中的同步与异步调用以及Vue2的基础知识。 ### JS同步与异步调用 - **同步调用**:代码按顺序执行,每个任务完成后才执行下一个。 - **异步调用**:允许代码并发执行,不必等待前一个任务完成。 - **回调函数**:传统异步模式,如`setTimeout`。 - **Promise**:解决回调地狱问题,链式调用 `.then()`。 - **async/await**:基于Promise,使异步代码看起来像同步代码。 ### Vue2基础知识 - **核心概念**:指令、实例、组件、模板、数据绑定和生命周期钩子。 - **指令**
56 5
|
3月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
3月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
60 1
|
3月前
|
JavaScript
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
|
3月前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
|
3月前
|
资源调度 前端开发
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
|
3月前
|
JavaScript 前端开发 API
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
36 0
|
4月前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
36 0