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

您的項目需求