javaScript项目案例
文章目录
- javaScript项目案例
- 1.Dom操作
- 创建节点
- 获取节点
- 常用的节点方法
- 设置节点内容
- 设置style属性
- 2.项目案例
- 2.1用js在网页上写一个hello world
- 2.2模态框案例
- 2.3点击有惊喜
- 2.4制作一个简易留言板
- 2.5制作选项卡
- 2.6淘宝搜索框制作
- 2.7动态时间制作
- 2.8匀速运动
- 2.9设置五秒关闭广告
- 2.10设置五秒关闭广告(升级版)
- 2.11小米滚动
- 2.12无缝轮播图
javaScript项目案例
储备知识，感觉玩dom主要是玩document这个类
1.Dom操作
在js中所有标签都属于节点。dom是一个倒着的树，树根为html标签
创建节点
createElement():传入标签类型,创建一个结点
示例：var oP = document.createElement('p');
获取节点
这些都是位于document的方法
| 函数 | 功能 |
|---|---|
| getElementById() | 通过标签id获得节点 |
| getElementByClassName() | 通过标签class名获得节点(注意：获得的class数组) |
| getElementByTagName() | 通过标签类型获得节点(注意：获得的是标签数组) |
常用的节点方法
这个都是节点的方法
| 函数 | 功能 | 示例 |
|---|---|---|
| appendChile() | 将传入节点加入到标签中 | oDiv.appendChile('oP'); |
| getAttribute() | 获取标签属性 | oA.getAttribute('href'); |
| setAttribute() | 设置标签属性 | oA.setAttribute('href','https://www.baidu.com'); |
| removeAttribute() | 删除标签属性 | oA.removeAttribute('href'); |
| removeChild() | 删除节点下的标签 | oDiv.removeChild(oP); |
设置节点内容
innerHTML:将内容解析HTML脚本写入标签内
示例：oP.innerHTML = i love you
innerText:将内容以文本的形式写入标签内
示例：oP.innerHTML = i love you
注意：innerHTML可以解析标签，innerText将内容原封不动的填入标签内
设置元素id:oP.id='op1';
设置类名class:oP.className='para1';
设置style属性
示例：oP.style.backgroundColor = 'blue';
注意：style属性内的用-表示的，在js中全部变为驼峰式写法，而且设置属性要用引号引起来
例如设置字体大小
在css中：font-size = 16px;
在js中：oP.style.fontSize = '16px';
2.项目案例
2.1用js在网页上写一个hello world
写一个hello world
2.2模态框案例
其实，就是运用btn.onclick将单击事件的函数改为新的匿名函数。单击一次，就调用一次对象下面的onclick方法
模态框案例
2.3点击有惊喜
这个例子，主要就是用计数器记录点击次数，每点击一次标签，就会调用一次该函数，计数器加1，从而控制标签颜色和文字。
点击有惊喜呦
点击有惊喜呦！！！
2.4制作一个简易留言板
留言板
简易留言板
通过这个简易留言板例子，
第一，不要取消margin，padding，否则h1标题没有内边距，很难看；
第二，设置span标签点击事件必须在btn1按钮内，因为js里面代码是从上向下执行的，btn.onclick就是添加调用方法；如果直接把span这段代码放在下面，因为刚开始没有spans标签，也就没有执行这段代码。要是放在btn的onclick里面，每次调用时，就会自动给每个span添加一个调用方法
2.5制作选项卡
这个例子主要是用了，将三个p标签隐藏起来，只显示含active类的标签，通过js点击事件，切换p标签之间的显隐达到目的。
选项卡
这里要注意，在378行不能用i来代表标签的索引，(因为i的值在不断变化,遍历结束时，这里i最终值为4，即当触发单击事件时，获取的i的值为4，而不是当初遍历中i的值)。他们得到i都是引用哦，不是一个纯数字。
2.6淘宝搜索框制作
这个例子主要用到了input和label两个标签，以及js的oninput来实现的
淘宝搜索框
刚开始，测试时候，发现输入框无法输入；后来仔细检查了一遍，发现his.value == ''写成了his.value = ‘’，导致每次输入时，都会给输入框自动赋值空字符
2.7动态时间制作
这里主要用了setInterval定时器函数,每隔一秒执行一次函数，这个函数作用是获得最新时间，写入p标签中
动态时间制作
注意：获得时间的操作必须写在函数内，否则该变量的值不会更新，只会一直重复写入相同的值
三元表达式
return n > 9 ? n:'0'+n;
等同于
if(n < 9)
{
return '0'+ n;
}
else {
return n;
}
2.8匀速运动
通过定时器函数setInterval函数和清除定时器函数clearInterval。两个函数实现的，主要思想时，每执行一次定时器，改变一次left数字达到看上去小方块在移动的效果
匀速运动案例
注意：clearInterval清除定时器函数必须要接受一个值，这个值正是定时器返回的值，count += 10这行代码可以通过改变右值改变小方块运动速度。
2.9设置五秒关闭广告
这个例子主要用了定时器，和固定定位相关的知识，5s秒后自动关闭广告。window.onload这个函数的功能是，加载页面时自动运行相应的函数
设置5s关闭广告
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
难度不大，之后写了个升级版
2.10设置五秒关闭广告(升级版)
设置一个定时器，在网页上显示倒计时后，再显示关闭x，设定单击事件
设置5s关闭广告
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
性感美女，在线发牌
这里主要注意的地方是，在for循环中如果要设置单击事件，不要用i做索引,所有单击事件中的i是for循环后的值，而不是每次循环的值。
2.11小米滚动
这里主要用overflow用来隐藏图片超过盒子部分。然后通过定位，控制top坐标数值，使其在盒子里垂直移动
小米滚动
这里注意的地方是，每次调用onmouseover时，要清除之前的定时器，防止干扰下次操作。而且图片移动到顶端和低端，要注意好终止坐标的位置。
2.12无缝轮播图
这个案例主要运用盒子和ul之间定位，通过定时器，让标签left坐标不断减小，达到ul向左移动的效果
无缝轮播图
这里有几个注意点是，ul标签宽度肯定要比盒子宽，这样可以使里面所有li标签浮动时，不会有li标签被挤到下一层去。onmousemove效果是鼠标移动到标签上执行的函数，onmouseout效果是鼠标移除标签时执行的函数。这里还要注意一点是，标签移到最右端要有个判断，让其坐标归0，从头开始再次移动