登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›JavaScript —— 输入与输出

JavaScript —— 输入与输出

慷规扣 2025-6-6 10:12:24
输入与输出

输入：


  • 从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。
例如：
  1. <body>
  2. <body>
  3. <body>
  4.    
  5. </body>
  6. </body>输入：
  7. <body>
  8. <body>
  9.    
  10. </body>
  11. </body><textarea  name="" id="" cols="30" rows="10"></textarea>
  12. </body>
复制代码

  • 通过Ajax与WebSocket从服务器端获取输入。


  • 标准输入。

输出：


  • 调试用console.log，会将信息输出到浏览器控制台。


  • 改变当前页面的HTML与CSS。


  • 通过Ajax与WebSocket将结果返回到服务器。

案例：

index.html中的内容为：
  1. <body>
  2. <body>
  3.    
  4. </body>
  5. </body><body>
  6. <body>
  7.    
  8. </body>
  9. </body><body>
  10. <body>
  11.    
  12. </body>
  13. </body>Document<body>
  14. <body>
  15.    
  16. </body>
  17. </body>  // 引入css样式<body>
  18. <body>
  19. <body>
  20.    
  21. </body>
  22. </body>输入：
  23. <body>
  24. <body>
  25.    
  26. </body>
  27. </body><textarea  name="" id="" cols="30" rows="10"></textarea>
  28. </body>
  29. <body>
  30. <body>
  31.    
  32. </body>
  33. </body><body>
  34. <body>
  35.    
  36. </body>
  37. </body>
  38. <body>
  39. <body>
  40.    
  41. </body>
  42. </body>Run<body>
  43. <body>
  44.    
  45. </body>
  46. </body>
  47. <body>
  48. <body>
  49.    
  50. </body>
  51. </body><body>
  52. <body>
  53.    
  54. </body>
  55. </body>
复制代码
 
index.css中的内容为：
  1. textarea {
  2. <body>
  3. <body>
  4.    
  5. </body>
  6. </body>width: 500px;
  7. <body>
  8. <body>
  9.    
  10. </body>
  11. </body>height: 300px;
  12. <body>
  13. <body>
  14.    
  15. </body>
  16. </body>background-color: aquamarine;
  17. <body>
  18. <body>
  19.    
  20. </body>
  21. </body>font-size: 24px;
  22. }
  24. pre {
  25. <body>
  26. <body>
  27.    
  28. </body>
  29. </body>width: 500px;
  30. <body>
  31. <body>
  32.    
  33. </body>
  34. </body>height: 300px;
  35. <body>
  36. <body>
  37.    
  38. </body>
  39. </body>background-color: rgb(191, 197, 229);
  40. <body>
  41. <body>
  42.    
  43. </body>
  44. </body>font-size: 24px;
  45. }
复制代码
 
index.js中的内容为：
  1. /**
  2. * Document有很多对象属性和方法，DOM是HTML在浏览器中的表示形式，允许您操纵页面。
  3. * D（document）：document的意思是文档，在dom中会将HTML这个页面给解析为一个文档，并在解析的同时会提供一个 document对象。
  4. * O（object）：object就是对象，而DOM则把HTML页面中的所有元素都解析为一个对象。<body>
  5. <body>
  6.    
  7. </body>
  8. </body>  
  9. * M（model）：M代表的就是model（模块），主要表现的是dom里面各个对象之间的关系。
  10. *
  11. * 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点 ：
  12. * 文档是一个文档节点。
  13. * 所有的HTML元素都是元素节点。
  14. * 所有 HTML 属性都是属性节点。
  15. * 文本插入到 HTML 元素是文本节点。are text nodes。
  16. * 注释是注释节点。
  17. */
  19. /**
  20. * 获取文档中 id="demo" 的元素：
  21. * document.querySelector("#demo");
  22. */
  23. let input = document.querySelector(".input");
  24. let run = document.querySelector("button");
  25. let output = document.querySelector("pre");
  27. function main() {
  28. <body>
  29. <body>
  30.    
  31. </body>
  32. </body>// 给<run>元素添加监听事件。当触发“click”时，执行function()函数
  33. <body>
  34. <body>
  35.    
  36. </body>
  37. </body>run.addEventListener("click", function(){
  38. <body>
  39. <body>
  40.    
  41. </body>
  42. </body><body>
  43. <body>
  44.    
  45. </body>
  46. </body>let s = input.value;  //获取textarea中的input的值
  47. <body>
  48. <body>
  49.    
  50. </body>
  51. </body><body>
  52. <body>
  53.    
  54. </body>
  55. </body>output.innerHTML = s;  //展示pre内的标签内容
  56. <body>
  57. <body>
  58.    
  59. </body>
  60. </body>})
  62. }
  64. export {
  65. <body>
  66. <body>
  67.    
  68. </body>
  69. </body>main
  70. }
复制代码
格式化字符串



  • 字符串中填入数值：
index.js中的内容为：
  1. function main() {
  2. <body>
  3. <body>
  4.    
  5. </body>
  6. </body>let name = "kitty", age = 18;
  7. <body>
  8. <body>
  9.    
  10. </body>
  11. </body>let s = `My name is ${name}. I'm ${age / 2} years old.`;
  12. <body>
  13. <body>
  14.    
  15. </body>
  16. </body>console.log(s);
  18. }
  20. export {
  21. <body>
  22. <body>
  23.    
  24. </body>
  25. </body>main
  26. }
复制代码
index.html中的内容为：
  1. <body>
  2. <body>
  3.    
  4. </body>
  5. </body>
复制代码

  • 保留两位小数如何输出：
index.js中的内容为：
  1. function main() {<body>
  2. <body>
  3.    
  4. </body>
  5. </body>let x = 1.234567;<body>
  6. <body>
  7.    
  8. </body>
  9. </body>let y = x.toFixed(2);  // 保留2位小数<body>
  10. <body>
  11.    
  12. </body>
  13. </body>console.log(y);<body>
  14. <body>
  15.    
  16. </body>
  17. </body>let z = `${x.toFixed(2)}`;  // 保留2位小数<body>
  18. <body>
  19.    
  20. </body>
  21. </body>console.log(z);<body>
  22. <body>
  23.    
  24. </body>
  25. </body>console.log(Math.ceil(x));  // 向上取整<body>
  26. <body>
  27.    
  28. </body>
  29. </body>console.log(Math.floor(x));  // 向下取整<body>
  30. <body>
  31.    
  32. </body>
  33. </body>  console.log(Math.round(x));  // 取整}export {<body>
  34. <body>
  35.    
  36. </body>
  37. </body>main}
复制代码
index.html中的内容为：
  1. <body>
  2. <body>
  3.    
  4. </body>
  5. </body>
复制代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
慷规扣
2025-6-6 10:12:24

0

粉丝关注

18

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫