2019-04-11 自定义属性、点击按钮切换图片、函数传参、类
2019-04-13 本文已影响0人
北街九条狗
自定义属性
<style type="text/css">
ul{
list-style: none;
padding:0;
margin:0;
}
li{
width: 71px;
height: 76px;
background: url(img/练习1/bd1.png) no-repeat;
float:left;
margin-right: 5px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var aLi = document.getElementsByTagName('li');
for(var i = 0;i < aLi.length;i++){
// 自定义属性
aLi[i].onOff = true;
aLi[i].onclick = function(){
if(this.onOff){
this.style.background = 'url(img/练习1/bd2.png) no-repeat'
}else{
this.style.background = 'url(img/练习1/bd1.png) no-repeat'
}
this.onOff = !this.onOff;
}
}
</script>
</body>
点击按钮切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background: #202329;
}
ul{
list-style: none;
padding:0;
margin:0;
}
p{
margin:0;
}
#box,#box1{
width: 390px;
height: 480px;
border:10px solid #F3F3F3;
position: relative;
background: #f3f3f3 url(img/练习2/loader_ico.gif) no-repeat center center;
}
#box1{
position: absolute;
left:500px;
top:8px;
}
#box img,#box1 img{
width: 390px;
height: 480px;
}
/* 透明背景 */
.bg{
width: 100%;
height: 30px;
background: #000;
opacity: 0.5;
position: absolute;
}
.top{
top:0;
}
.bottom{
bottom:0;
}
/* 文字数量 */
.text{
width: 100%;
line-height: 30px;
text-align: center;
color: #fff;
position: absolute;
}
/* 点击按钮列表 */
.list{
width: 50px;
position: absolute;
right : -70px;
top: -10px;
}
.list li{
width: 50px;
height: 50px;
background: #fff;
margin-bottom: 5px;
}
.yellow{
background: #FFA500 !important;
}
</style>
</head>
<body>
<div id="box">
<img src="" alt="">
<p class="bg top"></p>
<p class="bg bottom"></p>
<p class="text top">图片文字正在加载..</p>
<p class="text bottom">图片数量正在计算..</p>
<ul class="list"></ul>
</div>
<div id="box1">
<img src="" alt="">
<p class="bg top"></p>
<p class="bg bottom"></p>
<p class="text top">图片文字正在加载..</p>
<p class="text bottom">图片数量正在计算..</p>
<ul class="list"></ul>
</div>
<script type="text/javascript">
var oBox = document.getElementById('box');
var oBox1 = document.getElementById('box1');
var arrImg1 = [
'img/练习2/1.png',
'img/练习2/2.png',
'img/练习2/3.png',
'img/练习2/4.png'
];
var arrImg2 = [
'img/练习2/1.jpg',
'img/练习2/2.jpg',
'img/练习2/3.jpg'
];
var arrText1 = ['雄鹰','精灵','美女','面具'];
var arrText2 = ['雄鹰1','精灵1','美女1'];
change(oBox,arrImg1,arrText1);
change(oBox1,arrImg2,arrText2);
function change(obj,arrImg,arrText){
var oImg = obj.getElementsByTagName('img')[0];
var oText = obj.getElementsByTagName('p')[2];
var oNum = obj.getElementsByTagName('p')[3];
var oUl = obj.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var num = 0;
// -------------------------------------添加定时器
function setObj(){
obj.timer = setInterval(function(){
num++;
if(num >= arrImg.length){
num = 0;
}
clearClass();
tab();
},1000);
}
setObj();
obj.onmouseover = function(){
clearInterval(this.timer);
}
obj.onmouseout = function(){
setObj();
}
// ----------------------------------------
// 第二种同步方式,利用变量,这个oLi专门保存激活的li元素
// var oLi = null;
// 加载li
for(var i = 0;i < arrImg.length;i++){
oUl.innerHTML += '<li></li>';
}
// 页面初始化
function tab(){
oImg.src = arrImg[num];
oText.innerHTML = arrText[num];
oNum.innerHTML = num + 1 + '/' + arrImg.length;
// 确定激活的li
aLi[num].className = 'yellow';
// 保存激活的li
// oLi = aLi[num];
}
tab();
// 给li加点击
for(var i = 0;i < aLi.length;i++){
// 自定义属性,索引
aLi[i].index = i;
aLi[i].onclick = function(){
num = this.index;
// oLi.className = '';
clearClass();
tab();
}
}
// 第一种同步方式,将所有li的className清空
function clearClass(){
for(var i = 0;i < aLi.length;i++){
aLi[i].className = '';
}
}
}
</script>
</body>
</html>
函数传参
function test(num1,num2){
var sum = 0;
for(var i = 0;i < arguments.length;i++){
sum += arguments[i];
}
console.log(sum);
}
test(2001,100);
test(2,100,9000);
test(2,100,9000,999);
类型转换
<script type="text/javascript">
var a = '200';
// 纯数值字符串,+是连接,-*/是正常的运算
console.log(a+10);
console.log(Number(a)+10);
console.log(a-10);
console.log(a*10);
console.log(a/10);
// NaN:not a number转换错误的提示
// Number能够将纯数值字符串转换成数值
// parseXXX取数值
console.log(parseInt(a));
console.log(parseFloat(a));
// isNaN()
console.log(isNaN('1'));
</script>
模拟QQ成员列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul,h4{
list-style: none;
margin:0;
padding:0;
}
#list{
width: 240px;
}
#list h4{
line-height: 30px;
background: #0067C3;
text-indent: 2em;
color:#fff;
cursor: pointer;
}
#list ul li{
line-height: 26px;
text-indent: 2em;
border:1px solid #D5D5D5;
cursor: pointer;
}
#list ul li:hover{
background: #C8ECE3;
}
#list ul{
display: none;
}
</style>
</head>
<body>
<ul id="list">
<li>
<h4>我的好友</h4>
<ul>
<li>王一一</li>
<li>李文华</li>
<li>高发展</li>
</ul>
</li>
<li>
<h4>我的同事</h4>
<ul>
<li>煌腾达</li>
<li>刘和谐</li>
<li>形如已</li>
<li>张曼玉</li>
<li>沈从文</li>
</ul>
</li>
<li>
<h4>我的同学</h4>
<ul>
<li>郭敬明</li>
<li>音奥正</li>
<li>郑安全</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var oList = document.getElementById('list');
var aH4 = oList.getElementsByTagName('h4');
var aUl = oList.getElementsByTagName('ul');
for(var i = 0;i < aH4.length;i++){
// 索引
aH4[i].index = i;
// 折叠开关
aH4[i].onOff = true;
aH4[i].onclick = function(){
if(this.onOff){
aUl[this.index].style.display = 'block';
}
else{
aUl[this.index].style.display = 'none';
}
this.onOff = !this.onOff;
}
}
</script>
</body>
</html>
反选小实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li><input type="checkbox" name="basketball"> 篮球</li>
<li><input type="checkbox" name="basketball"> 篮球</li>
<li><input type="checkbox" name="basketball"> 篮球</li>
<li><input type="checkbox" name="basketball"> 篮球</li>
<li><input type="checkbox" name="basketball"> 篮球</li>
<li><input type="checkbox" name="basketball"> 篮球</li>
<li><input type="checkbox" name="basketball"> 篮球</li>
<br>
<li><button type="button">反选</button></li>
</ul>
<script type="text/javascript">
var aInp = document.getElementsByTagName('input');
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
// 遍历每一个li,改变每个li的checked
for(var i = 0;i < aInp.length;i++){
aInp[i].checked = !aInp[i].checked;
}
}
</script>
</body>
</html>
获取元素样式
<style>
#box{
width: 100px;
height: 100px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="box"></div>
<!--
if(){}
路径不能作为条件,颜色不能作为条件
-->
<script type="text/javascript">
var oBox = document.getElementById('box');
// 样式是可写的,不可读
// 只能读取行间样式
// console.log(oBox.style.width);
// 获取样式的函数
// console.log(getComputedStyle(oBox).width);
// console.log(getComputedStyle(oBox)['width']);
function getStyle(obj,attr){
return getComputedStyle(obj)[attr];
}
console.log(getStyle(oBox,'height'));
</script>
</body>
定时器基础
// 循环没有时间概念,瞬间完成
// for(var i = 1;i < 10;i++){
// document.title = i;
// }
// 定时器 : 在一定时间内,发生某些事
// 1.setInterval() -- 勤劳,不阻止它,他就一直工作
// clearInterval() 清除定时器
//清除定时器时括号内传入定时器的名字如 clearInterval(timer)
var i = 0;
var timer = setInterval(function(){
if(i == 5){
clearInterval(timer);
}
document.title = i;
i++;
},1000);
// setInterval() 勤劳,不阻止,一直工作,clearInterval()
// setTimeout() 懒惰,只工作一次,clearTimeout()
