主题为吉他的html,HTML5 吉他标签生成器

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var $tab = document.querySelector(".tab")

function addRow(template, replace = false) {

var template = template || `

e|-------5-7-----7-|-8-----8-2-----2-|-0---------0-----|-----------------|

B|-----5-----5-----|---5-------3-----|---1---1-----1---|-0-1-1-----------|

G|---5---------5---|-----5-------2---|-----2---------2-|-0-2-2-----------|

D|-7-------6-------|-5-------4-------|-3---------------|-----------------|

A|-----------------|-----------------|-----------------|-2-0-0---0--/8-7-|

E|-----------------|-----------------|-----------------|-----------------|

`

var html = template.split("").map(e => {

if (e === "-" || e.match(/[0-9+]/))

return `${e}`

return `${e}`

}).join("")

replace ? $tab.innerHTML = html : $tab.innerHTML += html

var spans = document.querySelectorAll("span")

var isMoving = false

var $dragging

Array.prototype.forEach.call(spans, span => {

span.addEventListener("mousedown", e => {

e.preventDefault()

isMoving = true

$dragging = e.target

})

span.addEventListener("mouseup", e => {

isMoving = false

})

span.addEventListener("click", e => {

if (!e.target.classList.contains('is-editable')) return

var html = e.target.innerHTML

e.target.innerHTML = ""

var input = e.target.querySelector("input")

if (html != "-") input.value = html

input.focus()

input.addEventListener("blur", b => {

var value = b.target.value != "" ? b.target.value : "-"

e.target.innerHTML = `${value}`

})

})

})

document.body.addEventListener("mousemove", e => {

if (isMoving && e.target.classList.contains('is-editable')) {

var old = $dragging.innerHTML

var neww = e.target.innerHTML

$dragging.innerHTML = neww

e.target.innerHTML = old

$dragging = e.target

}

})

}

var template = `

e|-----------------------------------------------------------------------|

B|-----------------------------------------------------------------------|

G|-----------------------------------------------------------------------|

D|-----------------------------------------------------------------------|

A|-----------------------------------------------------------------------|

E|-----------------------------------------------------------------------|

`

addRow()

document.querySelector(".clear").addEventListener("click", clear)

document.querySelector(".add-row").addEventListener("click", e => addRow(template))

document.querySelector(".download").addEventListener("click", e => download())

function clear() {

addRow(template, true)

}

function download() {

var element = document.createElement('a')

element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent($tab.innerText))

element.setAttribute('download', "tab.txt")

element.style.display = 'none'

document.body.appendChild(element)

element.click()

document.body.removeChild(element)

}