JavaScript基础交互与函数封装-优快云博客

本文链接：https://blog.youkuaiyun.com/luffot/article/details/78388538

本文介绍了JavaScript中常见的用户交互方式，包括通过prompt和confirm进行输入与确认操作，以及使用location对象进行页面导航。此外，还详细展示了如何通过函数封装来简化代码并提高其复用性，例如计算水仙花数的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window对象

/*输入框 参数1：提示信息
 参数2：默认值

*
点击确认按钮：返回输入框的值，若没有值，返回一个空对象*/

// var age = prompt("年龄")

// alert(age)

/*确认框返回结果

*
点击确认按钮：返回true

*
点击取消按钮：返回false*/

// var result = confirm("您确定要删除吗")

// alert(result)

<body>

</body>

script

Location方法

加载新页面：location.assign

刷新页面：location.reload（）：不是完全刷新，会从缓存里面获取相关的数据

location.reload（true）:彻底刷新当前页面，不会从缓存里获取数据

替代页面：用一个新页面替代原先的老页面，跳转到新页面以后，无法返回到老页面

open方法

open（）：四个参数

1：打开新页面

2：打开新页面的别称

3：打开的新页面的状态

4：打开的新页面是否替换老页面

函数的封装

函数的目的是对一个功能进行封装

方便多出进行调用，实现代码的复用

用函数的封装计算水仙花数

function
check(num) {

var
num1 = num %
10;

var
num2 =
parseInt(num /
10 %
10);

var
num3 =
parseInt(num /
100)

if
(Math.pow(num1,3)
 + Math.pow(num2,3)
 + Math.pow(num3,3)
 == num){

return true;

}

}

for
(var
i
= 100;i
<=999;i++){

if
(check(i)){

alert(i);

};

}

函数传参

<button
onclick="showHello(9)">弹</button>

<button
onclick="add(20,20)">求和</button>

</body>

<script>

function
showHello(num) {

for(var
i =
1;i
<= num;i++){

document.write("hello<br>")

}

}

function
add(num1,num2) {

alert(num1+num2)

}

// showHello(5)

计算器 

<body>

数字1：<input
type="text"
id="num1">

<br>

数字2：<input
type="text"
id="num2">

<br>

结果：<input
type="text"
id="result">

<br>

<button
onclick="calc('+')">+</button>

<button
onclick="calc('-')">-</button>

<button
onclick="calc('*')">-</button>

<button
onclick="calc('/')">-</button>

</body>

<script>

function
calc(type) {

var
num1 =
parseInt(document.getElementById("num1").value);

var
num2 =
parseInt(document.getElementById("num2").value);

var
res =
0

switch
(type){

case
"+":

res
= num1
+ num2

break;

case
"-":

res
= num1
- num2

break;

case
"*":

res
= num1
* num2

break;

case
"/":

res
= num1
/ num2

break;

}

var
result 
= document.getElementById("result").value
= res;

}

</script>