js中常用的输出方式

tech2024-10-07  13

js中常用的输出方式

1、console控制台:在浏览器控制台输出

console.log; =>可以输出任意数据类型,控制台展示的类型也是对应的数据类型

console.log('a',10,{name:'Teal'},[10,20],false); // =>a 10 {name: "Teal"} (2) [10, 20] false

console.dir; =>输出一个对象或一个值得详细信息

console.dir({name:'Teal',age:20}); // =>Object age: 20 name: "Teal" __proto__: Object

console.wran; =>输出一个黄色背景的提示信息

cosnole.wran('当前操作不符合规范'); // => 黄色背景:‘当前操作不符合规范’

console.table; =>将json数据转化为表格输出

console.table({name:'teal',age:20})// => (index)Valuename“teal”age20

console.time/timeEnd; =>计算中间程序运行的预估时间(预估时间:会受到当前电脑性能的影响)

console.time('a'); //a表示当前计算的任务名称 for(let i=0;i<99999999;i++){} console.timeEnd('a'); // => a: 51.40185546875 ms

2、window提示框

alert; =>alert是浏览器窗口弹出一个提示框,提示框中输出指定的信息,但输出的是字符串

alert(20); // =>"20"

config;=>相对于alert来说,给用户添加了两个选择按钮,第一个就是确定按钮第二个是取消按钮,我们可以通过用户点击的按钮拿到用户点击了那个按钮

const bool=confirm('是否点击'); console.log(bool); // =>点击按钮输出true,点击取消输出false

prompt; =>相对于confirm来说在提供按钮的基础上还添加了输入框供用户输入信息,我们可以通过用户点击按钮来拿到用户输入的数据

const data=prompt('请输入内容'); cosnole.log(date); // =>如果用户点击了确定按钮就会输出用户输入的值,如果点击了取消就会输出null

3、向页面写入数据

document.write;=>把内容写入到页面中

document.write(123); // =>"123"

innerHTML/innerText;向指定的容器中插入信息,基于这两种方法会把原有的数据给覆盖掉,想要追加内容采用+=方式,innerHTML还可以将语义化标签解析成代码,而innerText会将其当作字符串直接输出

<!DOCTYPE html> <html lang="ZH-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text</title> </head> <body> <div id="box">123</div> </body> </html> <script> // 读取内容 console.log(document.querySelector('#box').innerHTML); // =>"123" console.log(document.querySelector('#box').innerText); //=>"123 //覆盖原有数据 console.log(document.querySelector('#box').innerHTML=456) // =>456 console.log(document.querySelector('#box').innerText=456) // =>456 //追加内容 console.log(document.querySelector('#box').innerHTML+='aaa'); // =>456aaa console.log(document.querySelector('#box').innerText+='aaa'); // =>456aaaaaa //渲染语义化标签 console.log(document.querySelector('#box').innerHTML='<h1>123</h1>'); // =>一级标题下的123 console.log(document.querySelector('#box').innerText='<h1>123</h1>'); // =>"<h1>123</h1>" </script>

value;=>给页面中的input赋值

<!DOCTYPE html> <html lang="ZH-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text</title> </head> <body> <input type="text" id="output"> </body> </html> <script> document.querySelector('#output').value='我是输入框中的内容'; // =>在输入框中有“我是输入框中的内容”这几个字 </script>
最新回复(0)