今天有五道可以练手
第一题
问题：用不同的三种js引入方式弹出自己的名字。
代码如下：
1、建立如下路径：
2、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>内嵌式</title> </head> <body> </body> <script> alert('我是web2206班的小孔'); </script> </html>代码运行结果：
第二题
问题：实现如下结果
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02作业</title> </head> <body> <button onclick=" alert('哈哈，惊喜大大的~');">点击我有惊喜</button> </body> </html>代码运行结果：
初始效果
点击按钮后效果
第三题
问题：利用所学的知识，在页面上实现如效果图
注：\u263a 字符代表笑脸
代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>03作业</title> </head> <body> </body> <script> document.write(` \u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a <br> \u263a欢迎学习JavaScript课程<br> \u263a我是web2206班的小孔<br> \u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a`); </script> </html>运行结果：
第四题
问题：根据所学知识，在提示输入框中输入姓名，在网页里显示“欢迎你，亲爱的xxx”
如果不输入，提示输入框中会有默认的“游客”，如果输入，网页里的“游客”会被输入的姓名替换掉代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>05作业</title> </head> <body> </body> <script> var yourname = prompt("请输入你的名字", "游客"); document.write('欢迎你，亲爱的' , `<span style="color:red;">${yourname}</span>`); </script> </html>运行结果：
注：用户可以输入内容，页面红色区域会变成输入的内容
第五题
问题：利用所学知识，实现效果图所示的表格
代码内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>05作业</title> </head> <body> </body> <script> document.write(` <table border="1"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr> <td>李思</td> <td>女</td> <td>18</td> </tr></table>`); </script> </html>运行结果：
今天的分享就到这里，代码内容为自己所写，如有错误请指教~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/46315.html
