JavaScript (摘抄笔记)

1. 显示与隐藏 

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

使用 style.display 属性

  1. 显示元素:将元素的 display 属性设置为 "block"(对于块级元素)或 "inline"(对于内联元素),具体取决于元素的类型。
  2. 隐藏元素:将元素的 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 属性。

  1. 显示元素:将 visibility 设置为 "visible"
  2. 隐藏元素:将 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开始,所以需要+1
            const day = date.getDate().toString().padStart(2, '0'); // 获取日
            const hours = date.getHours();
            // 使用getMinutes()方法获取当前的分钟数
            const minutes = date.getMinutes();
            // 如果分钟数是个位数,则在其前面补0
            const 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>

....End 

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值