网站首页 > 知识剖析 正文
第五节：函数传参，改变Div任意属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参，改变Div任意属性的值</title>
<link rel="stylesheet" href="../css/common.css">
<style>
.wrap{
width: 500px;
margin: 0 auto;
text-align: center;
}
label{
display: block;
margin: 10px;
}
button{
margin-left: 10px;
}
.content{
width: 200px;
height: 200px;
color: white;
background: black;
margin: 5px auto;
padding: 10px;
font-size: 14px;
line-height: 20px;
text-align: left;
}
</style>
</head>
<body>
<div class="wrap">
<label>
<span>属性名：</span>
<input type="text" value="background"/>
</label>
<label>
<span>属性值：</span>
<input type="text" value="blue"/>
</label>
<button>确定</button>
<button>重置</button>
<p class="content">在上方输入“属性名”和“属性值”，点击确认按钮查看效果。</p>
</div>
<script>
function change(elem, attr, value) {
elem.style[attr] = value;
}
window.onload = function () {
var inputs = document.getElementsByTagName("input");
var btns = document.getElementsByTagName("button");
var cons = document.getElementsByClassName("content");
btns[0].onclick = function () {
change(cons[0], inputs[0].value, inputs[1].value);
};
btns[1].onclick = function () {
cons[0].style.cssText = " ";
console.log(cons[0].style)
}
}
</script>
</body>
</html>
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
第六节：图片列表：鼠标移入/移出改变图片透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片列表：鼠标移入/移出改变图片透明度</title>
<link rel="stylesheet" href="../css/common.css">
<style>
.wrap{
width: 700px;
margin: 10px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.pics{
flex-basis: 128px;
height: 128px;
opacity: 0.5;
cursor: pointer;
border: 1px solid #999;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="pics"><img src="../image/1.jpg" /></div>
<div class="pics"><img src="../image/2.jpg" /></div>
<div class="pics"><img src="../image/3.jpg" /></div>
<div class="pics"><img src="../image/4.jpg" /></div>
<div class="pics"><img src="../image/5.jpg" /></div>
<div class="pics"><img src="../image/6.jpg" /></div>
<div class="pics"><img src="../image/7.jpg" /></div>
<div class="pics"><img src="../image/8.jpg" /></div>
<div class="pics"><img src="../image/9.jpg" /></div>
<div class="pics"><img src="../image/10.jpg" /></div>
</div>
<script>
window.onload = function () {
var pictures = document.getElementsByClassName("pics");
for (var i = 0; i < pictures.length; i++) {
pictures[i].onmouseover = function () {
this.style.opacity = "1";
};
pictures[i].onmouseout = function () {
this.style.cssText = " ";
}
}
}
</script>
</body>
</html>
第七节：简易选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易选项卡</title>
<link rel="stylesheet" href="../css/common.css">
<style>
.wrap{
width: 500px;
margin: 10px auto;
}
.nav{
background: black;
height: 30px;
display: flex;
border: 1px solid black;
}
.nav>li{
color: white;
flex-basis: 60px;
font-size: 14px;
line-height: 30px;
text-align: center;
}
.content{
width: 100%;
border: 1px solid black;
}
.content>li{
font-size: 14px;
line-height: 30px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="nav">
<li class="item" style="background: #ccc">第一课</li>
<li class="item">第二课</li>
<li class="item">第三课</li>
</ul>
<ul class="content" style="display: block;">
<li>网页特效原理分析</li>
<li>响应用户操作</li>
<li>提示框效果</li>
<li>事件驱动</li>
<li>元素属性操作</li>
<li>动手编写第一个JS特效</li>
<li>引入函数</li>
<li>网页换肤效果</li>
<li>展开/收缩播放列表效果</li>
</ul>
<ul class="content" style="display: none;">
<li>改变网页背景颜色</li>
<li>函数传参</li>
<li>高重用性函数的编写</li>
<li>126邮箱全选效果</li>
<li>循环及遍历操作</li>
<li>调试器的简单使用</li>
<li>典型循环的构成</li>
<li>for循环配合if判断</li>
<li>className的使用</li>
<li>innerHTML的使用</li>
<li>戛纳印象效果</li>
<li>数组</li>
<li>字符串连接</li>
</ul>
<ul class="content" style="display: none;">
<li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
<li>JavaScript出现的位置、优缺点</li>
<li>变量、类型、typeof、数据类型转换、变量作用域</li>
<li>闭包：什么是闭包、简单应用、闭包缺点</li>
<li>运算符：算术、赋值、关系、逻辑、其他运算符</li>
<li>程序流程控制：判断、循环、跳出</li>
<li>命名规范：命名规范及必要性、匈牙利命名法</li>
<li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>
<li>定时器的使用：setInterval、setTimeout</li>
<li>定时器应用：站长站导航效果</li>
<li>定时器应用：自动播放的选项卡</li>
<li>定时器应用：数码时钟</li>
<li>程序调试方法</li>
</ul>
</div>
<script>
window.onload = function () {
var items = document.getElementsByClassName("item");
var cons = document.getElementsByClassName("content");
for (var i= 0; i < items.length; i++) {
items[i].index = i;
items[i].onmouseover = function () {
for (var n = 0;n < items.length; n++) {
items[n].style.background = "black";
}
this.style.background = "#ccc";
for (var m = 0;m < cons.length;m++) {
cons[m].style.display = "none";
}
cons[this.index].style.display = "block"
}
}
}
</script>
</body>
</html>
第八节：简易JS年历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易JS年历</title>
<link rel="stylesheet" href="../css/common.css">
<style>
.wrap{
width: 300px;
margin: 0 auto;
background: #eaeaea;
padding: 10px;
}
ul{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
ul>li{
flex-basis: 70px;
height: 70px;
background: #424242;
margin: 5px 0 5px 0;
color: white;
font-size: 25px;
text-align: center;
line-height: 35px;
border: 1px solid black;
}
.current{
background: white;
color: #f69;
}
.content{
background: #f1f1f1;
border: 1px solid white;
font-size: 14px;
color: #666;
padding: 10px;
}
.content>h2{
line-height: 30px;
}
.content>p{
line-height: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><strong>1</strong><br/>JAN</li>
<li><strong>2</strong><br/>FER</li>
<li><strong>3</strong><br/>MAR</li>
<li><strong>4</strong><br/>APR</li>
<li><strong>5</strong><br/>MAY</li>
<li class="current"><strong>6</strong><br/>JUN</li>
<li><strong>7</strong><br/>JUL</li>
<li><strong>8</strong><br/>AUG</li>
<li><strong>9</strong><br/>SEP</li>
<li><strong>10</strong><br/>OCT</li>
<li><strong>11</strong><br/>NOV</li>
<li><strong>12</strong><br/>DEC</li>
</ul>
<div class="content">
<h2>
<strong>6</strong>月节日
</h2>
<p>端午节：6月4日至6日放假3天。</p>
</div>
</div>
<script>
window.onload = function () {
var lis = document.getElementsByTagName("li");
var con = document.getElementsByClassName("content")[0];
var str = con.getElementsByTagName("strong")[0];
var pCon = con.getElementsByTagName("p")[0];
var oArray = [
"元旦：1月1日至3日放假三天。",
"春节：2月2日至8日放假7天。",
"妇女节：3月8日妇女节，与我无关。",
"清明节：4月3日至5日放假3天",
"劳动节：4月30日至5月2日放假3天。",
"端午节：6月4日至6日放假3天。",
"小暑：7月7日小暑。不放假。",
"七夕节：8月6日七夕节。不放假。",
"中秋节：9月10日至12日放假3天。",
"国庆节：10月1日至7日放假7天。",
"立冬：11月8日立冬。不放假。",
"艾滋病日:12月1日\n废除奴隶制国际日:12月2日。"
];
for (var i = 0;i < lis.length;i++) {
lis[i].index = i;
lis[i].onmouseover = function () {
for ( var n = 0;n < lis.length; n++) {
lis[n].className = "";
}
this.className = "current";
str.innerHTML = this.index + 1;
pCon.innerHTML = oArray[this.index];
}
}
}
</script>
</body>
</html>
第九节：单一按钮显示/隐藏一播放列表收缩展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单一按钮显示/隐藏一播放列表收缩展开</title>
<link rel="stylesheet" href="../css/common.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.wrap{
width: 250px;
margin: 10px auto;
border: 1px solid #ced3d7;
}
.nav{
display: flex;
justify-content: space-between;
padding: 0 10px;
height: 30px;
line-height: 30px;
background: #ced3d7;
cursor: pointer;
color: #6b7980;
border: 1px solid white;
}
.nav>span{
flex: 1;
font-size: 14px;
}
ul>li>a{
display: block;
font-size: 14px;
line-height: 30px;
background: #e9edf2;
padding: 0 10px;
color: #6b7980;
}
ul>li>a:hover{
background: white;
}
</style>
</head>
<body>
<div class="wrap">
<h2 class="nav"><span>播放列表</span><i class="fa fa-caret-up"></i><i class="fa fa-caret-down" style="display: none;"></i></h2>
<ul style="display: none;">
<li><a href="#">玩家之徒 - 蔡依林</a></li>
<li><a href="#">原谅我就是这样的女生 - 戴佩妮</a></li>
<li><a href="#">猜不透 - 丁当</a></li>
<li><a href="#">自导自演 - 周杰伦</a></li>
<li><a href="#">浪漫窝 - 弦子</a></li>
<li><a href="#">流年 - 王菲</a></li>
</ul>
</div>
<script>
window.onload = function () {
var hTwo = document.getElementsByTagName("h2")[0];
var iS = hTwo.getElementsByTagName("i");
var oUl = document.getElementsByTagName("ul")[0];
var show = true;
hTwo.onclick = function () {
if (show) {
oUl.style.display = "block";
iS[0].style.display = "none";
iS[1].style.display = "block";
} else {
oUl.style.display = "none";
iS[0].style.display = "block";
iS[1].style.display = "none";
}
show = !show;
}
}
</script>
</body>
</html>
第十节：提示框效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提示框效果</title>
<link rel="stylesheet" href="../css/common.css">
<style>
.wrap{
width: 600px;
margin: 10px auto;
padding: 10px;
border: 1px solid black;
}
h2{
font-size: 14px;
line-height: 20px;
text-align: center;
}
ul{
display: flex;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
ul>li{
flex-basis: 100px;
height: 100px;
border: 1px solid black;
background: #f0f0f0;
padding: 5px;
margin: 5px 0;
position: relative;
}
ul>li>a{
font-size: 14px;
color: #666666;
text-decoration: none;
}
ul>li>img{
display: none;
z-index: 10;
position: absolute;
left: 50%;
top: 50%;
margin: -64px 0 0 -64px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<div class="wrap">
<h2>名车车标展示-鼠标移过显示车标</h2>
<ul>
<li>
<a href="#" title="BMW 宝马汽车"><strong>BMW</strong><br>马汽车</a>
<img src="../image/1.jpg" alt="BMW 宝马汽车" />
</li>
<li>
<a href="#" title="Alfa Romeo 阿尔法-罗米欧"><strong>Alfa Romeo</strong><br>阿尔法-罗米欧</a>
<img src="../image/2.jpg" alt="Alfa Romeo 阿尔法-罗米欧" />
</li>
<li>
<a href="#" title="Skoda 斯柯达"><strong>Skoda</strong><br>斯柯达</a>
<img src="../image/3.jpg" alt="Skoda 斯柯达" />
</li>
<li>
<a href="#" title="Volkswagen 大众汽车"><strong>Volkswagen</strong><br>大众汽车</a>
<img src="../image/4.jpg" alt="Volkswagen 大众汽车" />
</li>
<li>
<a href="#" title="Saab 萨布牌轿"><strong>Saab</strong><br>萨布牌轿车</a>
<img src="../image/5.jpg" alt="Saab 萨布牌轿" />
</li>
<li>
<a href="#" title="Lamborghini 兰博基尼"><strong>Lamborghini</strong><br>兰博基尼</a>
<img src="../image/6.jpg" alt="Lamborghini 兰博基尼" />
</li>
<li>
<a href="#" title="Porsche 保时捷"><strong>Porsche</strong><br>保时捷</a>
<img src="../image/7.jpg" alt="Porsche 保时捷" />
</li>
<li>
<a href="#" title="Peugeot 标致"><strong>Peugeot</strong><br>标致</a>
<img src="../image/8.jpg" alt="Peugeot 标致" />
</li>
<li>
<a href="#" title="Mercedes1 梅赛德斯 奔驰"><strong>Mercedes1</strong><br>梅赛德斯 奔驰</a>
<img src="../image/9.jpg" alt="Mercedes1 梅赛德斯 奔驰" />
</li>
<li>
<a href="#" title="Buick 别克汽车"><strong>Buick</strong><br>别克汽车</a>
<img src="../image/10.jpg" alt="Buick 别克汽车" />
</li>
</ul>
</div>
<script>
window.onload = function () {
var liS = document.getElementsByTagName("li");
var imgS = document.getElementsByTagName("img");
for (var i = 0; i < liS.length; i++) {
liS[i].index = i;
liS[i].onmouseover = function () {
imgS[this.index].style.display = "block";
};
liS[i].onmouseout = function () {
imgS[this.index].style.display = "none";
};
}
}
</script>
</body>
</html>
第十一节：鼠标移过，修改图片路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移过，修改图片路径</title>
<link rel="stylesheet" href="../css/common.css">
<style>
body{
background: black;
}
.wrap{
width: 222px;
border: 5px solid white;
margin: 10px auto;
background: white;
}
ul{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
background: black;
padding: 5px;
}
ul>li{
justify-self: center;
align-self: center;
}
.item-1{
grid-column: 1/4;
grid-row: 1/4;
}
.item-2{
grid-row: 1/2;
}
.item-3{
grid-row: 2/3;
}
.item-4{
grid-row: 3/4;
}
.loading{
background: url("../image/loading.gif");
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="item-1"><img src="../image/big_1.jpg"><div class="loading"></div></li>
<li class="item-2"><a href="#"><img src="../image/small_1.jpg"></a></li>
<li class="item-3"><a href="#"><img src="../image/small_2.jpg"></a></li>
<li class="item-4"><a href="#"><img src="../image/small_3.jpg"></a></li>
<li class="item-5"><a href="#"><img src="../image/small_4.jpg"></a></li>
<li class="item-6"><a href="#"><img src="../image/small_5.jpg"></a></li>
<li class="item-7"><a href="#"><img src="../image/small_6.jpg"></a></li>
<li class="item-8"><a href="#"><img src="../image/small_7.jpg"></a></li>
<li class="item-9"><a href="#"><img src="../image/small_8.jpg"></a></li>
<li class="item-10"><a href="#"><img src="../image/small_9.jpg"></a></li>
<li class="item-11"><a href="#"><img src="../image/small_10.jpg"></a></li>
<li class="item-12"><a href="#"><img src="../image/small_11.jpg"></a></li>
</ul>
</div>
<script>
window.onload = function () {
var liS = document.getElementsByTagName("li");
var imgS = document.getElementsByTagName("img");
var oDiv = document.getElementsByTagName("div")[1];
for (var i = 1; i < imgS.length; i++) {
imgS[i].index = i;
imgS[i].onmouseover = function () {
var img = new Image();
img.src = imgS[0].src = this.src.replace(/small/, "big");
oDiv.style.display = "block";
img.complete ? oDiv.style.display = "none" : (imgS[0].onload = function() {
oDiv.style.display = "none"
});
}
}
}
</script>
</body>
</html>
第十二节：复选框（checkbox）全选/全不选/返选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框（checkbox）全选/全不选/返选</title>
<link rel="stylesheet" href="../css/common.css">
<style>
.wrap{
width: 500px;
margin: 10px auto;
font-size: 14px;
}
form{
margin: 0 auto;
width: 120px;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}
label{
display: block;
line-height: 30px;
}
label>input{
margin-right: 5px;
}
.oppo{
margin-left: 10px;
cursor: pointer;
color: #77ccff;
}
.oppo:hover{
color: #ff6699;
}
.title{
display: inline-block;
}
.tip{
margin: 10px auto;
text-align: center;
}
.border{
padding-top: 5px;
border-top: 1px solid black;
}
</style>
</head>
<body>
<div class="wrap">
<form>
<label class="title">
<input type="checkbox" value="" name="tab" /><strong><span>全选</span></strong>
</label>
<span class="oppo">反选</span>
<label class="border">
<input type="checkbox" value="" name="tab" /><span>选项（一）</span>
</label>
<label>
<input type="checkbox" value="" name="tab" /><span>选项（二）</span>
</label>
<label>
<input type="checkbox" value="" name="tab" /><span>选项（三）</span>
</label>
<label>
<input type="checkbox" value="" name="tab" /><span>选项（四）</span>
</label>
<label>
<input type="checkbox" value="" name="tab" /><span>选项（五）</span>
</label>
<label>
<input type="checkbox" value="" name="tab" /><span>选项（六）</span>
</label>
<label>
<input type="checkbox" value="" name="tab" /><span>选项（七）</span>
</label>
<label>
<input type="checkbox" value="" name="tab" /><span>选项（八）</span>
</label>
<label>
<input type="checkbox" value="" name="tab" /><span>选项（九）</span>
</label>
<label>
<input type="checkbox" value="" name="tab" /><span>选项（十）</span>
</label>
</form>
<div class="tip">
1、切换全选/全不选文字；2、根据选中个数更新全选框状态；
</div>
</div>
<script>
window.onload = function () {
var inputS = document.getElementsByTagName("input");
var spanS = document.getElementsByTagName("span");
var opposites = document.getElementsByClassName("oppo")[0];
function isChockAll() {
for (var i = 1 , n = 0; i < inputS.length; i++ ) {
inputS[i].checked && n++;
}
inputS[0].checked = (n === inputS.length - 1);
spanS[0].innerHTML= inputS[0].checked ? "全不选" : "全选";
}
function change(value) {
for(var i = 1;i < inputS.length;i++) {
inputS[i].checked = value;
}
}
//全选或全不选
inputS[0].onclick = function () {
if(this.checked){
change(true);
}else {
change(false);
}
isChockAll();
};
//反选
opposites.onclick = function () {
for (var i = 1; i < inputS.length; i++) {
inputS[i].checked = !inputS[i].checked;
}
isChockAll();
};
//元素的变化影响全选件
for (var i = 1; i < inputS.length; i++) {
inputS[i].onclick = function () {
isChockAll();
}
}
}
</script>
</body>
</html>猜你喜欢
- 2024-11-19 HTML的表单标签
- 2024-11-19 HTML编码规范
- 2024-11-19 Dreamweaver/Html常用标签(代码)含义汇总
- 2024-11-19 程序员都必掌握的前端教程之VUE基础教程(七)
- 2024-11-19 HTML标签之表单标签
- 2024-11-19 10个免费的HTML在线编辑工具
- 2024-11-19 jquery获取选中的checkbox复选框的值
- 2024-11-19 这些 CSS 伪类，你可能还不知道，可以用起来了
- 2024-11-19 前端入门——css伪类和伪元素
- 2024-11-19 HTML-注册页面 212
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)