<body> <div id="greeting"></div> <script src="JS函数 时钟.js"></script> <script> window.onload = function() { greet(); }; </script> </body>greet() 函数的实现怎么给出
时间: 2023-11-27 14:52:03 浏览: 58
可以像下面这样实现 greet() 函数:
```
function greet() {
const currentTime = new Date();
const currentHour = currentTime.getHours();
const greetingDiv = document.getElementById("greeting");
if (currentHour < 12) {
greetingDiv.innerText = "Good morning!";
} else if (currentHour < 18) {
greetingDiv.innerText = "Good afternoon!";
} else {
greetingDiv.innerText = "Good evening!";
}
}
```
这个函数首先获取当前时间,然后根据当前时间的小时数判断应该显示哪个问候语,最后将问候语显示在 id 为 "greeting" 的 div 元素上。
相关问题
<script type="module">中的module
在JavaScript中,`<script type="module">`是一个HTML标记,用于指示浏览器该脚本是一个ES模块。ES模块是一种用于组织JavaScript代码的标准化方式,它允许开发人员将代码拆分成多个文件,每个文件都有自己的作用域,并且可以导出和导入不同的功能。使用模块可以使代码更易于维护、测试和扩展。
当浏览器遇到一个`<script type="module">`标记时,它会将该脚本视为一个模块,并将其加载和解析为一个单独的文件。模块可以使用`import`和`export`关键字来导入和导出功能,例如:
```
// greeting.js
export function sayHello(name) {
console.log(`Hello, ${name}!`);
}
// index.js
import { sayHello } from './greeting.js';
sayHello('John');
```
在这个例子中,`greeting.js`文件导出一个名为`sayHello`的函数,`index.js`文件导入该函数并调用它。这种模块化的代码组织方式有助于减少全局命名空间污染和代码冲突,并使代码更易于维护和扩展。
<script setup>如何使用】
在Vue 3中,使用`<script setup>`可以更简洁地定义组件的逻辑部分。这种语法是基于Vue 3的编译优化,可以在编译时将模板和逻辑部分合并,从而提高性能。
使用`<script setup>`时,可以将props、data、computed、methods等都定义在其中,而不需要单独定义在不同的区块中。同时,也不需要在模板中使用`this`关键字来访问数据和方法,而是可以直接使用变量名。
示例代码如下:
```
<template>
<div>{{ greeting }}</div>
</template>
<script setup>
import { ref } from 'vue'
const name = 'John'
const greeting = ref(`Hello, ${name}!`)
</script>
```
在上面的代码中,我们使用了`<script setup>`来定义组件的逻辑部分,包括引入Vue 3的`ref`函数、定义变量`name`和`greeting`。在模板中,我们直接使用了变量`greeting`,而不需要通过`this.greeting`来访问。
需要注意的是,`<script setup>`只能在单文件组件中使用,而不能在普通的`.js`文件中使用。同时,由于它是Vue 3的新特性,需要使用Vue 3才能使用。
阅读全文