ページの進行率を表示
html
<!-- ページの進行率 -->
<div id="progress-bar-container">
<div id="progress-bar"></div>
</div>
Java script
window.onscroll = function() {
var button = document.querySelector('.back-to-top');
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
// スクロールに応じて進捗バーを更新する
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
document.getElementById('progress-bar').style.width = scrollPercent + '%';
};
アコーディオン
html
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)"><!-- 表示タイトル --></div>
<div class="accordion-content">
<!-- 格納する文章を記述 -->
</div>
</div>
Java script
function toggleAccordion(header) {
// クリックされたヘッダーの親要素である.accordionを取得
const accordion = header.parentElement;
// 子要素である.accordion-contentを取得
const content = accordion.querySelector('.accordion-content');
// 内容が表示されているかどうかをチェック
if (content.style.display === 'block') {
// 内容が表示されている場合は折りたたむ
content.style.display = 'none';
} else {
// 内容が表示されていない場合は展開する
content.style.display = 'block';
}
}
文字カウントの表示
html
<div class="count-display">
count: <span id="charCount">0</span>
</div>
Java script
function updateCharCount(textarea, countDisplay) {
const text = textarea.value;
const charCount = text.length;
countDisplay.textContent = charCount;
}
document.getElementById('textInput').addEventListener('input', function() {
updateCharCount(this, document.getElementById('charCount'));
});
クリップボードにコピー
html
<button id="copyButton">copy</button>
Java script
document.getElementById('copyButton').addEventListener('click', function() {
const textArea = document.getElementById('textInput');
textArea.select();
document.execCommand('copy');
alert('テキストがクリップボードにコピーされました！');
});
ダウンロード
html
<button id="downloadButton">download</button>
Java script
document.getElementById('downloadButton').addEventListener('click', function() {
const title = document.getElementById('titleInput').value;
let content = `タイトル: ${title}\n\n`;
const textareas = document.querySelectorAll('textarea');
textareas.forEach((textarea, index) => {
const text = textarea.value;
const charCount = text.length;
content += `No. ${index + 1} - count: ${charCount}\n${text}\n\n`;
});
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'writing.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});