我们先看看JS代码和效果图

代码如下:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_18,color_FFFFFF,t_70,g_se,x_16

 

按F12预览效果图如下:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_18,color_FFFFFF,t_70,g_se,x_16

 

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

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_18,color_FFFFFF,t_70,g_se,x_16

下面我们来讲解下这个JS:

JS部分

<script>

function displayDate()//申明一个JS叫做displayDate()的方法

{

document.getElementById("yue").innerHTML=Date();

//这段表示从整个文档获取元素里面id样式名字为yue的标签,然后把JS内置时间函数Date()放到标签id为yue的标签中并替换掉原来标签的内容!

}

</script>

代码部分

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

 

 

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐