JavaScript 的输出！

avaScript 通常用于操作 HTML 元素。

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素：

例子

通过指定的 id 来访问 HTML 元素，并改变其内容：

JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id="demo" 的 HTML 元素，并把它的内容（innerHTML）替换为图片红框中的内容。

写到文档输出

下面的例子直接把 <p> 元素写到 HTML 文档输出中：

实例：

为一名开发者，很多时候都需要写下自己的学习内容、debug过程或者所思所感，方便以后快速回忆和巩固，也便于分享给其他人，谈起写点东西，对于开发者来说最方便的无疑是markdown了，其简洁高效的语法可以让我们在较短的时间内写出具有美观格式的文章。很多时候我们也需要将现有的非markdown书写的笔记转成markdown，此时就需要一个好的工具了。那么，作为开发者的你都用过哪些工具呢？这里我分享一些自己用过的或正在用的工具给大家吧。

1.bejson

网站是Html/MarkDown互转工具-BeJSON.com，效果如下：

经过小编测试，该网站的转换效率较高，即便是几千字的文章，也能在点击转换按钮的瞬间完成转换，同时支持markdown与HTML的互相转换，效率都是较高的。

现在演示如下：

可以看到，效率还是很高的，除此之外，还有很多其他工具也可以使用。

2.hello world

这是一个刚出现的平台，地址是HelloWorld - 专业开发者社区，是作为一个技术交流平台的工具出现的，平台首页是HelloWorld - 专业开发者社区。整个转换界面很清新简洁，如下：

可以看到，整个界面的底色是蓝色，给人一种清新舒适的感觉。同时提供了两种转换的方式：

直接提供链接
转换HTML代码

第一种功能是一般工具网站没有的，现在对两种情况进行测试：

可以看到，两种方式的转换效果都还是不错的，也支持将转换得到的markdown保存到本地。

从上面的页面中也可以看到，hello world官方给出了html2md工具的开源地址，是「链接」，提到了包含的技术栈：

vue 前端三剑客之一，主张最少，具有高度灵活性的渐进式框架
nuxt 通过利用 Vue.js 和 Node.js最佳实践来构建高性能应用程序
express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架
element-ui 宇宙第一 Vue 第三方组件库，有不服？
js-dom 一款可在 Node 环境下模拟浏览器的 API 的库
turndown 使用 JavaScript 将 HTML 转换为 Markdown
axios 易用、简洁且高效的 http库，支持浏览器和 Node 环境。
mavon-editor 一款基于 Vue 的 markdown 编辑器，支持所见即所得
sass 强大的 Css 预处理器之一

工具的架构主要如下：

主要是为自己有需要的小伙伴提供参考，可以在开源代码的基础上进行定制，得到自己所需要的转换工具，也算是比较良心了，有需要的小伙伴可以自己去试试啊，或者可以点击程序员博客发文利器-html2md更新指南去了解更多内容吧。

3.sitdown

与前面过两个网站不同的是，这个平台只提供了一个demo，地址为SitDown (mdnice.com)，页面示意如下：

可以看到，这个项目提供了对微信、从SDN和掘金等的支持，可以将多种形式的文章转为markdown。但是这个项目并未上线，更像是提供了一个开发指南和实现思路供需要的开发者进行参考。但是我们还是可以使用这个demo来进行转换的。

现在进行测试：

可以看到，转换效果和速度还是可以的，只不过还不支持对链接进行转换。当然，我们也可以进行进一步的封装，以达到我们需要的效果。

好了，今天的分享就到这里，不知道小伙伴们喜欢哪一个工具呢？都去试试吧。有自己用得比较顺手的工具也可以在评论区分享、让大家一起来体验下啊[鼓掌]

.js导入导出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入导出</title>
</head>



<body>
 <div>
     <button id="btn" >点我展示信息</button>
     </div>
 <!-- 导入showMessage.js文件的全部内容 -->
 <script src="showMessage.js"></script>

 <script>
    document.getElementById("btn").onclick=function(){
        complexMessage('bbbbb');
    }
</script>
</body>


</html>

//简单的展示信息
function simpleMessage(msg){
    console.log(msg)
}

//复杂的展示信息
function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

//简单的展示信息

export function simpleMessage(msg){

console.log(msg)

}

//复杂的展示信息

export function complexMessage(msg){

console.log(new Date()+": "+msg)

}

export命令可以按需导出，如果需要批量导出则可以添加

export{ simpleMessage,complexMessage};

导出时可以用别名

import { messageMethods as cm } from './showMessage.js’

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入导出</title>
</head>



<body>
 <div>
     <button id="btn" >点我展示信息</button>
     </div>


 <script type="module">
     import { complexMessage as cm } from "./showMessage.js";

     document.getElementById("btn").onclick=function(){
        cm('bbbbb');
    }
</script>
</body>


</html>

//简单的展示信息
 function simpleMessage(msg){
    console.log(msg)
}

//复杂的展示信息
 function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

export{  simpleMessage ,complexMessage }

默认导出

//简单的展示信息
export function simpleMessage(msg){
    console.log(msg)
}

//复杂的展示信息
export function complexMessage(msg){
    console.log(new Date()+": "+msg)
}
export default {  simpleMessage ,complexMessage }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入导出</title>
</head>



<body>
 <div>
     <button id="btn" >点我展示信息</button>
     </div>


 <script type="module">
     import xx from "./showMessage.js";

     document.getElementById("btn").onclick=function(){
        xx.complexMessage('bbbbb');
    }
</script>
</body>


</html>

使用默认导出后，那么xx.可以带出函数。

在线咨询

上一篇：Automation Anywhere中使用VBS发
下一篇：CSS属性值函数（4）极值函数min()、max()

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 的输出！

1.bejson

2.hello world

3.sitdown

您的项目需求