本帖最后由 AsusCoder 于 2018-5-18 18:35 编辑
姓名:曾耀峰
这三天html+css+js,有点吃不消,量力而为地掌握,熟悉API文档上的方法。设想这些功能在以后开发中的使用场景,以后遇到Mark一个印象。
今天学了js,最大的感受是,在视觉上能够给页面有一些活力。比如给广告展示模块设置轮播;在功能上的使用是很强大的,比如:
1.能够获得任意一个标签,并能修改它。
2.多种事件触发捕获,能够添加更多的功能。比如,当点击表单form的submit按钮,会触发onsubmit事件。这个时候想捕获这个事件,就可以在form上面添加一个属性onsubmit ='js函数'。
总结今天的知识:
一.案例1:制作广告图轮播效果。
这个主要功能是使用window.setInterval("函数方法",毫秒数) 这个方法来设定该网页每个毫秒数执行所引用的函数方法。interval在英语的单词意思是间隔,时段等意思。理解方法的名称就可以知道这个函数的功能。
另外,调用该函数还需要用到window.onload这个事件,当网页body标签加载的时候就会触发该事件。
比较困难的是。函数内调用另外一个函数,还有第一次用js写逻辑时候,会有点手生。
贴一下代码方便记忆:
<script type="application/javascript">
window.onload = function() {
window.setInterval("changeImg()", 5000);
//window.setTimeout("popTopAd()", 3000);
};
var i = 1;
function changeImg() {
i++;
if(i > 3) {
i = 1;
}
var img1 = document.getElementById("img1");
img1.src = "img/" + i + ".jpg";
}
document是小写,不是大写的Document,写成大写会没有效果
getElementById("标签的id名字")是重要方法
做出来的轮播效果是瞬间切换图片的,和范例网页上的图片平移轮播不一样。在思考如何制作。
二、案例2:加载页面一次性弹出广告层效果
这个案例启动的事件同样是onload事件,由于onload事件只能声明一次。所以当广告图片切换和广告层弹出同时要使用onload事件的时候,只能把两个函数都放在window.onload = function(){}匿名函数体里面。一次性的延迟设置方法使用setTimeout("函数方法",毫秒数)。使用一次就不会再调用了。隐藏一个标签的属性是display:block;显示是display:none;通过getElementById()方法获取到广告层。直接设置ad.style.display 的值即可完成。
三、案例3:其他常用的js方法:
prompt()方法能够弹出一个可以输入数值的窗口。这个方法对于以后我们在后台管理页面进行数据的修改应该是比较常用的。输入新的数据,可以覆盖原来的数据
confirm()方法能弹出一个确认的窗口,对于以后删除数据等慎重的行为,加上这样一个窗口可以再确认一次,防止数据丢失。
另外,BOM的全拼是Browser Object Model 浏览器对象模型。是我们今天所学的知识。BOM除了Window这个顶级对象 ,其他另外六个对象。其中Screen屏幕,Timing.时间,Coookies本地缓存等三个对象是重要的,后面有空再学习。
今天写代码遇到的问题:
1.在补齐首页的热门商城模块中,单项商品的商品图片,名字,价格这三个,由图片,文字,链接等三个非块状标签组成,如何将它们进行规则排列。参考代码中的属性display:inline-block能将图片标签转换为块状元素,其他文字标签,链接标签各自贴上p标签,可以很好使用。
2.在补齐首页的人们商城模块中。因为总共要连续粘贴复制十次相同的商品展示项,导致代码冗余。利用js的innerHTML方法来动态HTML代码。只要写好一个,获取它,并循环十次就可以生成同样的代码。
3.当页面用百分比尺寸布局的时候,将浏览器窗口缩小的话,页面的布局会被打乱。这是一个不好的体验。后面查了资料。解决方法是给div设置最小宽度值min-width。设置的值为自己屏幕的大小。
使用属性min-width。设置为min-width:1360px;。当然,每一个div都这样设置最小宽度值是不行的。直接给套在最外层
的一个div设置一个即可。
视频上提供的WEB01项目并没有进行这样的设置。应该补上去的。
|