1. js_demo1.html
*问题-创建html页面并为该页面添加三个按钮,页面效果如下:
-单击页面上的按钮”first button”,弹出提示信息”Hello World”;
-单击页面上的按钮”second button”,弹出提示信息”Hello World in script block”;
-单击页面上的”third button”,弹出提示信息”Hello World in script file”
*要求
-第一个按钮的js代码直接定义在其onclick事件中
-第二个按钮的js代码直接定义在<script>代码块中
-第二个按钮的js代码直接定义在<script>代码块中
*方案-为页面添加js代码有三种方式
-事件定义方式:将js代码写在html元素的事件中
-嵌入式:在页面的<head>中定义<script>标签,并在其中书写js代码
-文件调用式:js代码位于独立的.js文件中,在html页面引用js文件
*demo: https://github.com/Way123Ne/htmAndcssAndJs/tree/master/JSDemo1
2.js_demo2.js
*问题
需要使用4张图片完成页面上的广告轮播效果
*要求
-页面加载后,先在页面上显示某个图片
-之后每隔3秒,自动更换页面上的图片显示
-一轮显示完后,重复下一轮显示
-鼠标移入图片时,停止轮换;鼠标移出图片时,继续轮换
*方案
-创建数组,用于存储需要显示的图片的路径
-页面初始化时,显示第一张图片,然后,启动周期性时钟,每隔3s更换图片的显示:显示数组中的下一个图片。因此,需定义变量表示当前显示数组中的第几个图片:var imageIndex=1;
-上述代码中,将变量imageIndex=1,是因为:页面首次加载时显示数组中索引为0的图片,3秒后,进行第一次图片变换:需要显示数组中索引为1的图片
-另外,为实现鼠标移入图片则停止时钟、移出继续启动时钟的功能,需用到鼠标事件onmouseover&onmouseout
*demo: https://github.com/Way123Ne/htmAndcssAndJs/tree/master/JSDemo1