js打卡第二天—打印输出、用户输入名字案例

摘要:接上期内容,上期我们已经写过如何打开如何创建,相信小伙伴们都已经学会了,所以本期博主就直接跳过了,本期我们来学习—打印输出案例和用户输入名字案例,我们来开始吧!

一、打印输出案例

在vscode里面创建打印输出案例.html
(1)document.write('')使用,在body里面输入以下内容:
<script>
     document.write('学习打卡')            // document 文档的意思    write 写
     document.write('<h1>学习打卡</h1>')   //字符串里面可以用标签
</script>

效果如下:

(2)alert('')使用,在body里面输入以下内容:
<script>
   alert('我叫大美丽')  //alert 警示 弹框
</script>

效果如下:

(3)console.log('')使用,在body里面输入以下内容:
<script>
   console.log('我是程序员看的')   // 控制台输出语法  程序员看的
</script>

在网页里面右击检查,在控制台点console,效果如下:

(4)prompt('')使用,在body里面输入以下内容:
<script>
   //输入语句 prompt
   prompt('您今年多大了?')
</script>

效果如下:

二、用户输入名字案例

在vscode里面创建用户输入名字案例.html

在body里面输入以下内容:

<script>
    let uname = prompt('请输入你的名字:')
    document.write(uname)
</script>

效果如下:

点击确定:

三、总结

今天的学习就到这里结束了,明天预告:

  • 变量的使用

  • 交换变量

  • let和var的区别

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现日历上打卡显示用户的功能,可以使用 HTML、JavaScript 和 CSS。以下是一种实现方式: 1. 首先,需要一个日历的 HTML 页面。可以使用 table 元素来创建一个简单的日历表格。 ```html <table> <thead> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <!-- 其他行省略 --> </tbody> </table> ``` 2. 接下来,需要使用 JavaScript 代码动态地向日历表格中加日期。可以使用 Date 对象来获取当前日期及其对应的星期几,然后将它们加到表格中。 ```javascript const date = new Date(); const year = date.getFullYear(); const month = date.getMonth() + 1; const today = date.getDate(); const firstDay = new Date(year, month - 1, 1).getDay(); // 本月第一天是星期几 const tbody = document.querySelector('tbody'); let row = tbody.insertRow(); // 插入一行 for (let i = 0; i < firstDay; i++) { row.insertCell(); // 插入空单元格 } for (let i = 1; i <= getDaysInMonth(year, month); i++) { const cell = row.insertCell(); cell.textContent = i; if (i === today) { cell.classList.add('today'); // 突显示今天的日期 } // TODO: 根据用户打卡记录,修改单元格的样式 if (hasPunchedIn(i)) { cell.classList.add('punched'); } if (isPunchingIn(i)) { cell.classList.add('punching'); } if (hasPunchedOut(i)) { cell.classList.add('punched-out'); } if (isPunchingOut(i)) { cell.classList.add('punching-out'); } if (i === 7) { row = tbody.insertRow(); // 换行 } } function getDaysInMonth(year, month) { return new Date(year, month, 0).getDate(); } function hasPunchedIn(date) { // TODO: 判断该日期是否已经打卡 return false; } function isPunchingIn(date) { // TODO: 判断用户是否正在打卡 return false; } function hasPunchedOut(date) { // TODO: 判断该日期是否已经下班打卡 return false; } function isPunchingOut(date) { // TODO: 判断用户是否正在下班打卡 return false; } ``` 3. 最后,使用 CSS 样式来定义单元格的外观,以突显示用户打卡记录。 ```css td.today { background-color: #f0f0f0; } td.punched { background-color: green; color: white; } td.punching { background-color: yellow; } td.punched-out { background-color: red; color: white; } td.punching-out { background-color: orange; } ``` 在实际使用中,需要根据实际情况修改 JavaScript 代码中的 TODO 部分,以实现具体的打卡功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值