//==================================================// | |
// 参考 | |
// http://qiita.com/shiozaki/items/0e42e101b7483df13c8f | |
// | |
// 使い方 | |
// <span class="gekiyasu">19800</span> | |
// <script src="gekiyasu.js"></script> | |
// <script> | |
// gekiyasu.initialize(); | |
// </script> | |
//==================================================// | |
((exports) => { | |
if (document.querySelector('.gekiyasu-css') === null) { | |
let style = document.createElement('style'); | |
style.textContent = ` | |
@import url(https://fonts.googleapis.com/css?family=Poppins:700); | |
.gekiyasu { | |
color: #c70506; | |
text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 5px 4px 3px rgba(0,0,0,0.5); | |
font-weight: bold; | |
font-family: Poppins; | |
letter-spacing: -3px; | |
} | |
.gekiyasu .gekiyasu-price1 { | |
font-size: 78px; | |
margin-right: -5px; | |
font-style: italic; | |
} | |
.gekiyasu .gekiyasu-price2 { | |
font-size: 59px; | |
margin-right: 10px; | |
font-style: italic; | |
} | |
.gekiyasu .gekiyasu-yen { | |
font-size: 40px; | |
} | |
`; | |
style.classList.add('gekiyasu-css'); | |
document.querySelector('head').appendChild(style); | |
} | |
exports.gekiyasu = {}; | |
exports.gekiyasu.initialize = (selector) => { | |
selector = selector || '.gekiyasu'; | |
Array.prototype.forEach.call(document.querySelectorAll(selector), (element) => { | |
let value = element.textContent; | |
value = value.replace(/(\d)(?=(\d{3})+$)/g, '$1,').split(','); | |
element.textContent = ''; | |
element.classList.add('gekiyasu'); | |
if (value.length >= 2) { | |
let price1 = document.createElement('span'); | |
price1.textContent = value.shift(); | |
price1.classList.add('gekiyasu-price1'); | |
element.appendChild(price1); | |
value.unshift(''); | |
} | |
let price2 = document.createElement('span'); | |
price2.textContent = value.join(','); | |
price2.classList.add('gekiyasu-price2'); | |
element.appendChild(price2); | |
let yen = document.createElement('span'); | |
yen.textContent = '円'; | |
yen.classList.add('gekiyasu-yen'); | |
element.appendChild(yen); | |
}); | |
}; | |
})(window); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment