javascript点击事件显示日期的效果

246 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第21天,点击查看活动详情

如何实现javascript/JS点击事件显示日期的效果?

我们先看看javascript/JS代码和效果图:

代码如下:

图1

1.png

首先:按F12预览效果图如下:

图2

2.png

然后:点击“显示日期”按钮之后出现的效果图如下:

图3

3.png

接着:下面我们来讲解下这个javascript/JS:

其中的javascript/JS部分如下:

<script>
function displayDate()//申明一个JS叫做displayDate()的方法
{
document.getElementById("yue").innerHTML=Date();//这段表示从整个文档获取元素里面id样式名字为yue的标签,然后把JS内置时间函数Date()放到标签id为yue的标签中并替换掉原来标签的内容!
}
</script>

其中的HTML代码部分如下:

<h1>月影的第一个javascript程序</h1>
<p id="yue">第一段</p>
<button type="button" onclick="displayDate()">显示日期</button>//通过onclick这个点击事件来调用JS中含有displayDate()的JS方法,从而产生JS效果!

在后面的文章中会继续的给大家讲解其它的javascript/JS相关的功能和效果!

希望大家多多给意见!

关注公众号(月影WEB),了解更多的前后端知识;

欢迎大家关注互相交流学习;