document
.addEventListener('DOMContentLoaded', function () { //
获取元素 const list = document
.getElementBy
Id('list'); const addBtn = document
.getElementBy
Id('addBtn'); const clearBtn = document
.getElementBy
Id('clearBtn'); const saveBtn = document
.getElementBy
Id('saveBtn'); const resetBtn = document
.getElementBy
Id('resetBtn'); // 题目数据 let questions = JSON
.parse(localStorage
.getItem('questions')) || []; // 初始渲染 render(); // 添加题目 addBtn
.addEventListener('click', function () { questions
.push({
id: Date
.now(), title: '', options: [ {
id: 1, text: '', correct: false }, {
id: 2, text: '', correct: false }, {
id: 3, text: '', correct: false }, {
id: 4, text: '', correct: false } ] }); saveRender(); }); // 清空题目 clearBtn
.addEventListener('click', function () { if (confirm('确定要清空所有题目吗？此操作不可恢复！')) { questions = []; saveRender(); } }); // 保存题目 saveBtn
.addEventListener('click', function () { localStorage
.setItem('questions', JSON
.stringify(questions)); alert('题目已成功保存！'); }); // 重置题目 resetBtn
.addEventListener('click', function () { questions = JSON
.parse(localStorage
.getItem('questions')) || []; render(); alert('已恢复上次保存的内容'); }); // 列表点击事件 list
.addEventListener('click', function (e) { if (!e
.target.closest('
.item')) return; const
id = parseInt(e
.target.closest('
.item')
.dataset
.id); const q = questions
.find(item => item
.id ===
id); // 删除题目 if (e
.target.classList
.contains('del-btn')) { if (confirm('确定要删除这道题目吗？')) { questions = questions
.filter(item => item
.id !==
id); saveRender(); } } // 选择答案 if (e
.target.classList
.contains('sel-btn')) { const opt
Id = parseInt(e
.target.dataset
.opt
Id); q
.options
.forEach(opt => opt
.correct = false); q
.options
.find(opt => opt
.id === opt
Id)
.correct = true; saveRender(); } // 添加选项 if (e
.target.classList
.contains('add-opt')) { const new
Id = q
.options
.length > 0 ? Math
.max(
...q
.options
.map(opt => opt
.id)) + 1 : 1; q
.options
.push({
id: new
Id, text: '', correct: false }); saveRender(); } // 删除选项 if (e
.target.classList
.contains('del-opt')) { if (q
.options
.length <= 4) { alert('至少需要保留4个选项！'); return; } q
.options
.pop(); saveRender(); } }); // 输入处理 list
.addEventListener('input', function (e) { if (!e
.target.closest('
.item')) return; const
id = parseInt(e
.target.closest('
.item')
.dataset
.id); const q = questions
.find(item => item
.id ===
id); // 题目输入 if (e
.target.classList
.contains('q-input')) { q
.title = e
.target.value; } // 选项输入 if (e
.target.classList
.contains('opt-input')) { const opt
Id = parseInt(e
.target.dataset
.opt
Id); const opt = q
.options
.find(item => item
.id === opt
Id); opt
.text = e
.target.value; } save(); }); // 保存数据 function save() { localStorage
.setItem('questions', JSON
.stringify(questions)); } // 保存并渲染 function saveRender() { save(); render(); } // 渲染题目 function render() { list
.innerHTML = questions
.map((q,
idx) => { const opts = q
.options
.map(opt => ` <div class="opt"> <div class="opt-label">${String
.fromCharCode(64 + opt
.id)}</div> <input type="text" class="opt-input" placeholder="选项内容
..." value="${opt
.text}" data-opt-
id="${opt
.id}" > <button class="sel-btn" data-opt-
id="${opt
.id}" style="background: ${opt
.correct ? '#28a745' : ''}" > ${opt
.correct ? '✓ 已选' : '选择'} </button> </div> `)
.join(''); return ` <div class="item" data-
id="${q
.id}"> <div class="title"> <h4>题目 ${
idx + 1}</h4> <button class="btn del-btn">删除</button> </div> <input type="text" class="q-input" placeholder="请输入题目内容
..." value="${q
.title}" > <div>${opts}</div> <div class="opt-ctrl"> <button class="btn add-opt">添加选项</button> <button class="btn del-opt">删除选项</button> </div> </div> `; })
.join(''); } });
将以上代码按照以下代码格式写 变量名不变
var left, right, bottom, prev, radioTit, contentList;
var questionList = [],
option = ‘’,
timer = null;
init()
function init() {
left = document
.querySelector(‘
.left’);
right = document
.querySelector(‘
.right’);
bottom = document
.querySelector(‘
.bottom’);
radioTit = document
.querySelector(‘
.radio-tit’);
contentList = document
.querySelector(‘
.content-list’);
questionList = localStorage
.questionList ? JSON
.parse(localStorage
.questionList) : [];
right
.addEventListener('click', rightClickHandler); radioTit
.addEventListener('click', titClickHandler); contentList
.addEventListener('click', listClickHandler); contentList
.addEventListener('input', inputHandler); render();
}
function rightClickHandler(e) {
if (!/li/i
.test(e
.target.nodeName)) return;
if (prev) prev
.style
.display = ‘none’
const option = e
.target.className
.match(/\w+(?=-)/)[0];
prev = document
.querySelector(‘
.’ + option);
prev
.style
.display = ‘block’;
}
function titClickHandler(e) {
if (!/button/i
.test(e
.target.nodeName)) return;
if (e
.target.className === ‘add’) {
questionList
.push({
question: ‘’,
options: [‘’, ‘’, ‘’, ‘’],
result: ‘’
})
localStorage
.questionList = JSON
.stringify(questionList);
render();
} else {
questionList
.length = 0;
localStorage
.questionList = JSON
.stringify(questionList);
render();
document
.querySelector(‘
.radio’)
.style
.display = ‘none’
}
}
function listClickHandler(e) {
if (!e
.target.classList
.contains(‘btn’)) return
const
id = e
.target.getAttribute(‘data’);
if (e
.target.classList
.contains(‘content-delete’)) {
questionList
.splice(
id, 1);
localStorage
.questionList = JSON
.stringify(questionList);
render();
} else if (e
.target.classList
.contains(‘select’)) {
if (e
.target.innerHTML === ‘选择’) {
const result = e
.target.getAttribute(‘name’);
questionList[
id]
.result = result;
} else {
questionList[
id]
.result = ‘’;
}
localStorage
.questionList = JSON
.stringify(questionList);
render()
} else if (e
.target.classList
.contains(‘option-add’)) {
questionList[
id]
.options
.push(‘’);
localStorage
.questionList = JSON
.stringify(questionList);
render();
} else if (e
.target.classList
.contains(‘option-delete’)) {
if (questionList[
id]
.options
.length <= 4) {
alert(‘至少保留4个选项’)
} else {
questionList[
id]
.options
.pop()
localStorage
.questionList = JSON
.stringify(questionList);
render(0)
}
}
}
function inputHandler(e) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
const name = e
.target.getAttribute(‘name’),
id = e
.target.getAttribute(‘data’);
if (name === ‘question’) {
questionList[
id]
.question = e
.target.value;
} else {
idx = e
.target.getAttribute(‘name’) - 1;
questionList[
id]
.options[
idx] = e
.target.value;
}
localStorage
.questionList = JSON
.stringify(questionList);
}, 500)
}
function render() {
contentList
.innerHTML = questionList
.map((item, index) => {
return <li> <div class="content-tit">单选题${index + 1}: <div class="content-delete btn" data="${index}">删除</div> </div> <div class="content-question"> <div class="question"> <label for="question">题目 :</label> <input name="question" type="text" value="${item
.question}" data=${index}> </div>+
item
.options
.map((it,
idx) => {
return <div> <label for="${
idx + 1}">${option = String
.fromCharCode(
idx + 65)}:</label> <input name="${
idx + 1}" type="text" value="${it}" data=${index}> <div class="select btn" data="${index}" name="${option}">${item
.result === option ? '√' : '选择'}</div> ${
idx === item
.options
.length - 1 ? '<div class="option-add btn" data="' + index + '">添加</div><div class="option-delete btn" data="' + index + '">删除</div>' : ''} </div>
})
.join(‘’) +
</div></li>
})
.join(‘’)
}
本文介绍了一个简单的JavaScript函数setEffect，该函数通过获取调用它的元素的ID来为不同的UI效果提供支持。示例中提供了四个不同ID的链接，每个链接代表一种不同的视觉效果。
扫一扫
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
