html自定义函数循环输出n以内数之和,并分别使用简单调用、事件调用、链接调用(n为形式参数)
时间: 2023-06-19 07:07:51 浏览: 71
以下是使用 HTML 自定义函数循环输出 n 以内数之和,并分别使用简单调用、事件调用、链接调用的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>自定义函数示例</title>
<script type="text/javascript">
// 定义自定义函数
function sum(n) {
var total = 0;
for (var i = 1; i <= n; i++) {
total += i;
}
return total;
}
</script>
</head>
<body>
<!-- 简单调用 -->
<p>1 到 10 的和为:{{sum(10)}}</p>
<!-- 事件调用 -->
<button onclick="document.getElementById('result').innerHTML = sum(20)">计算 1 到 20 的和</button>
<p id="result"></p>
<!-- 链接调用 -->
<a href="#" onclick="alert('1 到 30 的和为:' + sum(30)); return false;">计算 1 到 30 的和</a>
</body>
</html>
```
在上述代码中,我们使用了 HTML 的模板字符串语法 `{{}}` 来调用自定义函数,并将结果输出到页面上。在简单调用中,我们直接在模板字符串中调用函数并输出结果。在事件调用中,我们在按钮的 `onclick` 事件中调用函数并将结果输出到指定的 DOM 元素上。在链接调用中,我们在链接的 `onclick` 事件中调用函数并使用 `alert()` 函数来弹出结果。