JavaScript (摘抄笔记)

1. 显示与隐藏

在JavaScript中，显示和隐藏元素是一个常见的操作，通常通过改变元素的CSS属性来实现。以下是一些基本的方法来控制元素的显示和隐藏：

使用 `style.display` 属性

显示元素：将元素的 display 属性设置为 "block"（对于块级元素）或 "inline"（对于内联元素），具体取决于元素的类型。
隐藏元素：将元素的 display 属性设置为 "none"。

// 显示元素
function showElement(elementId) {document.getElementById(elementId).style.display = 'block'; // 或 'inline'，取决于元素类型
}// 隐藏元素
function hideElement(elementId) {document.getElementById(elementId).style.display = 'none';
}

使用 `classList.toggle` 方法

classList.toggle 方法可以在元素的类列表中添加或删除一个类，这可以用于切换元素的显示状态。通常，你会定义一个CSS类来控制元素的显示和隐藏。

/* CSS */
.hidden {display: none;
}

// 切换元素的显示和隐藏状态
function toggleElement(elementId) {document.getElementById(elementId).classList.toggle('hidden');
}

使用 `style.visibility` 属性

如果你只是想让元素在页面上不可见，但仍然占据空间（即不影响布局），可以使用 visibility 属性。

显示元素：将 visibility 设置为 "visible"。
隐藏元素：将 visibility 设置为 "hidden"。

// 显示元素
function showElementWithVisibility(elementId) {document.getElementById(elementId).style.visibility = 'visible';
}// 隐藏元素，但保持布局不变
function hideElementWithVisibility(elementId) {document.getElementById(elementId).style.visibility = 'hidden';
}

使用 `addEventListener` 来添加交互

你可以通过给元素添加事件监听器来根据用户的操作显示或隐藏元素。

// 假设有一个按钮，点击时切换一个元素的显示状态
document.getElementById('myButton').addEventListener('click', function() {var element = document.getElementById('myElement');element.style.display = element.style.display === 'none' ? 'block' : 'none';
});

这些方法可以根据你的具体需求和场景进行选择和使用。

2. 数字小写转中文大写

<script>function convertToRMB(amount) {const units = ['元', '十', '百', '千', '万'];const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];function convert(num) {if (num === 0) {return '';}let str = '';if (num < 10) {str = digits[num];} else if (num < 20) {str = '十' + digits[num - 10];} else if (num < 100) {str = digits[Math.floor(num / 10)] + '十' + digits[num % 10];} else if (num < 1000) {str = digits[Math.floor(num / 100)] + '百' + convert(num % 100);} else if (num < 10000) {str = digits[Math.floor(num / 1000)] + '千' + convert(num % 1000);} else {str = digits[Math.floor(num / 10000)] + '万' + convert(num % 10000);}return str;}const [integerPart, decimalPart] = String(amount).split('.');const integerInRMB = convert(parseInt(integerPart));let result = integerInRMB + '元';if (decimalPart) {result += decimalPart.split('').map(digit => digits[digit]).join('') + '角';}return result;}console.log(convertToRMB(11320.12));  //壹万壹千叁百贰十零元壹贰角document.write(convertToRMB(11320.12))</script>

注:只去到万位

3. 日期与日期单号

<script>// 创建一个新的Date对象，它将自动设置为当前日期和时间const today = new Date();let dh_x = '2024'// 将日期格式化为 YYYY-MM-DD 格式的字符串function formatDate(date) {const year = date.getFullYear(); // 获取年份const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份从0开始，所以需要+1const day = date.getDate().toString().padStart(2, '0'); // 获取日const hours = date.getHours();// 使用getMinutes()方法获取当前的分钟数const minutes = date.getMinutes();// 如果分钟数是个位数，则在其前面补0const formattedMinutes = minutes.toString().padStart(2, '0');const seconds = date.getSeconds();dh_x = year + month + day + hours + formattedMinutes/* 单号生成 */return `${year}年${month}月${day}日`;}// 使用formatDate函数格式化日期并显示const formattedDate = formatDate(today);console.log(`今天是：${formattedDate}`);document.write('今天是：'+formattedDate)document.write(`<br>`)document.write('单号：'+dh_x)</script>