今日所学摘要：
①js说明事件，话不多说，上代码，可直接运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>说明事件</title>
<style type="text/css">
body{
background-color:#f6f6f6;
}
.change{
width: 900px;
height: 200px;
background-color: #fff;
margin: 0 auto;
}
h1{
margin: 20px 0 20px 30px;
}
input.f1{
width: 100px;
height: 50px;
margin-left: 70px;
background-color: #337ab7;
color: #fff;
font-size: 22px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input.f1:hover{
background-color: #286090;
}
input[type=checkbox]{
width: 20px;
height: 20px;
}
span{
cursor: pointer;
}
input#bt{
display: none;
}
.change h2{
cursor: pointer;
}
.change h2:hover{
text-decoration: underline;
}
#tanchu{
color: red;
width: 400px;
height: 80px;
background-color: #999;
float: right;
display: none;
}
</style>
</head>
<body>
<div class="change">
<h1>1.说明事件</h1>
<input type="button" name="" class="f1" value="按钮" οnclick="attention()"/>
</div>
<div class="change">
<h1>2.移入移出</h1>
<input type="checkbox" name="" id="ck" value="" />
<span οnmοuseenter="show()" οnmοuseleave="hide()">鼠标经过出现按钮</span><br />
<input type="button" name="" class="f1" id="bt" value="按钮" />
</div>
<div class="change" id="changeColor" οnmοuseοver="changeColor()" οnmοuseleave="fchangeColor()">
<h3>3、函数 鼠标经过这个div执行变窄变高变色 移出再恢复</h3>
</div>
<div class="change">
<h2 id="over" οnmοuseοver="tanchu()" οnmοuseleave="xiaoshi()">鼠标经过就弹出层(函数、变量)</h2>
<div id="tanchu">
这是弹出的层
</div>
</div>
<script type="text/javascript">
function attention(){
alert("弹出窗口");
}
function show(){
var bt = document.getElementById("bt");
bt.style.display = "block";
console.log(bt);
}
function hide(){
var bt = document.getElementById("bt");
bt.style.display = "none";
// console.log(bt);
}
function changeColor(){
var changeColor = document.getElementById("changeColor");
changeColor.style.backgroundColor = "red";
}
function fchangeColor(){
var changeColor = document.getElementById("changeColor");
changeColor.style.backgroundColor = "white";
}
function tanchu(){
var tanchu = document.getElementById("tanchu");
tanchu.style.display = "block";
}
function xiaoshi(){
var tanchu = document.getElementById("tanchu");
tanchu.style.display = "none";
}
</script>
</body>
</html>
②javascript练习之innerHtml 数组 字符串拼接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #F6F6F6;
}
.f1 {
width: 1244px;
margin: 0 auto;
}
.f1>li {
height: 370px;
border-bottom: 8px;
background-color: #ffffff;
margin: 15px 0;
}
.title {
display: block;
padding: 42px 0 0 18px;
font-size: 25px;
color: #7698a7;
cursor: pointer;
}
.title:hover {
color: #23527c;
text-decoration: underline;
}
.f1>li>h4 {
color: #4f6f7d;
padding: 24px 0 20px 19px;
}
.content1 {
width: 987px;
height: 172px;
/*border: 1px solid red;*/
margin: 0 auto;
}
.content1_input,
.content1_show {
height: 80px;
margin-bottom: 10px;
/*border: 1px solid yellow;*/
padding-left: 20px;
padding-top: 20px;
border-bottom: 8px solid #e8f3ec;
box-shadow: 0px 0px 5px #888888;
}
.content1_input input {
border: 1px solid #d6d6d6;
border-radius: 5px;
}
.content1_input input[type=text] {
width: 172px;
height: 35px;
}
.content1_input input[type=button] {
width: 52px;
height: 35px;
background-color: #fff;
border: none;
border: 1px solid #d6d6d6;
cursor: pointer;
transition: background-color 1s;
}
.content1_input input[type=button]:hover {
background-color: #888888;
}
</style>
<body>
<ul class="f1">
<li>
<a class="title">javascript练习之innerHtml 数组 字符串拼接</a>
</li>
<li>
<h4>1、innerHTML的基本使用</h4>
<div class="content1">
<div class="content1_input">
<input type="text" name="" id="ip1" value="" placeholder="在这里输入文字" />
<input type="button" name="" id="btn1" value="提交" />
</div>
<div class="content1_show">
<span id="">
提交后在这里显示：<span id="result"></span>
</span>
</div>
</div>
</li>
<li>
<h4>2、innerHTML、字符串、判断的基本使用</h4>
<div class="content1">
<div class="content1_input">
<input type="text" name="" id="ip1" value="" placeholder="在这里输入文字" />+
<input type="text" name="" id="ip2" value="" placeholder="在这里输入文字" />
<input type="button" name="" id="btn1" value="提交" />
</div>
<div class="content1_show">
<span id="">
提交后在这里显示：<span id="result"></span>
</span>
</div>
</div>
</li>
<li>
<h4>3、数组输出练习</h4>
<div class="content1">
<div class="content1_input">
<p>已知数组内容：1、这是第一句，2、这是第二句，3、这是第三句，4、这是第四句。</p>
<input type="button" name="" class="btn3" value="提取一" />
<input type="button" name="" class="btn3" value="提取二" />
<input type="button" name="" class="btn3" value="提取三" />
<input type="button" name="" class="btn3" value="提取四" />
<input type="button" name="" class="btn3" value="全部弹出提取" style="background-color: #5bc0de;width: 108px;" />
</div>
<div class="content1_show">
<span id="">
提交后在这里显示：<span id="result3"></span>
</span>
</div>
</div>
</li>
<li>
<h4>记录</h4>
</li>
</ul>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var ip1 = document.getElementById("ip1");
var ip2 = document.getElementById("ip2");
var result = document.getElementById("result");
btn1.onclick = function() {
var res = ip1.value + ip2.value;
result.innerHTML = res;
}
//数组提取
var arr = ["这是第一句","这是第二句","这是第三句","这是第四句"];
var btn3 = document.getElementsByClassName("btn3");
var result3 = document.getElementById("result3");
for(var i = 0;i < btn3.length;i++){
btn3[i].index = i;
btn3[i].onclick = function(){
for(var j = 0;j < arr.length;j++){
if(this.index == j && this.index != arr.length){
result3.innerHTML = arr[j];
}else if(this.index == arr.length){
for(var k = 0;k < arr.length;k++){
alert(arr[k]);
}
break;
}
}
}
}
</script>
</body>
</html>
③this 索引值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this 索引值</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #F6F6F6;
}
.f1 {
width: 1244px;
margin: 0 auto;
}
.f1>li {
height: 205px;
border-bottom: 8px;
background-color: #ffffff;
margin: 15px 0;
}
.title {
display: block;
padding: 42px 0 0 18px;
font-size: 25px;
color: #7698a7;
cursor: pointer;
}
.title:hover {
color: #23527c;
text-decoration: underline;
}
.f1>li>h4 {
color: #4f6f7d;
padding: 24px 0 0 19px;
}
.btn {
width: 66px;
height: 32px;
border: none;
background-color: #5bc0de;
cursor: pointer;
}
.context1,
.context2 {
background-color: #d9edf7;
padding-left: 40px;
color: #66709b;
display: none;
}
.default {
background-color: #f0f0f0;
}
.ip1,
.ip2 {
transition: background-color 1s;
}
</style>
<body>
<ul class="f1">
<li>
<a class="title">javascript练习之this 索引</a>
</li>
<li>
<h4>1、选项卡 鼠标经过变换</h4>
<div id="">
<input type="button" name="" id="" value="栏目一" class="btn default ip1" />
<input type="button" name="" id="" value="栏目二" class="btn ip1" />
<input type="button" name="" id="" value="栏目三" class="btn ip1" />
<input type="button" name="" id="" value="栏目四" class="btn ip1" />
</div>
<div id="">
<ul class="context1" style="display: block;">
<li>栏目一的内容</li>
<li>栏目一的内容</li>
<li>栏目一的内容</li>
<li>栏目一的内容</li>
<li>栏目一的内容</li>
</ul>
<ul class="context1">
<li>栏目二的内容</li>
<li>栏目二的内容</li>
<li>栏目二的内容</li>
<li>栏目二的内容</li>
<li>栏目二的内容</li>
</ul>
<ul class="context1">
<li>栏目三的内容</li>
<li>栏目三的内容</li>
<li>栏目三的内容</li>
<li>栏目三的内容</li>
<li>栏目三的内容</li>
</ul>
<ul class="context1">
<li>栏目四的内容</li>
<li>栏目四的内容</li>
<li>栏目四的内容</li>
<li>栏目四的内容</li>
<li>栏目四的内容</li>
</ul>
</div>
</li>
<li>
<h4>2、选项卡 鼠标点击变换</h4>
<div id="">
<input type="button" name="" id="" value="栏目一" class="btn default ip2" />
<input type="button" name="" id="" value="栏目二" class="btn ip2" />
<input type="button" name="" id="" value="栏目三" class="btn ip2" />
<input type="button" name="" id="" value="栏目四" class="btn ip2" />
</div>
<div id="">
<ul class="context2" style="display: block;">
<li>栏目一的内容</li>
<li>栏目一的内容</li>
<li>栏目一的内容</li>
<li>栏目一的内容</li>
<li>栏目一的内容</li>
</ul>
<ul class="context2">
<li>栏目二的内容</li>
<li>栏目二的内容</li>
<li>栏目二的内容</li>
<li>栏目二的内容</li>
<li>栏目二的内容</li>
</ul>
<ul class="context2">
<li>栏目三的内容</li>
<li>栏目三的内容</li>
<li>栏目三的内容</li>
<li>栏目三的内容</li>
<li>栏目三的内容</li>
</ul>
<ul class="context2">
<li>栏目四的内容</li>
<li>栏目四的内容</li>
<li>栏目四的内容</li>
<li>栏目四的内容</li>
<li>栏目四的内容</li>
</ul>
</div>
</li>
<li>
<h4>3、选项卡 鼠标点击变换</h4>
</li>
<li>
<h4>记录</h4>
</li>
</ul>
<script type="text/javascript">
function setMouse(arrIp, arrContext, method) {
for(var i = 0; i < arrIp.length; i++) {
arrIp[i].index = i; //为按钮这个对象添加一个index属性，记录当前索引值
if(method == "onmouseover") {
arrIp[i].onmouseover = function() { //为当前按钮添加鼠标移入事件
this.className = "btn default ip1"; //this指向当前按钮，设置当前元素的class名
var sub1 = this.parentNode.childNodes; //获取当前元素的兄弟节点（包括自己）
for(var j = 0; j < sub1.length; j++) { //遍历按钮元素
if(sub1[j] != this) { //如果不是自身
sub1[j].className = "btn ip1"; //重新给class赋值，删除default
}
}
for(var j = 0; j < arrContext.length; j++) { //遍历内容元素
if(j == this.index) { //如果索引与当前按钮索引一致
arrContext[j].style.display = "block"; //设置display为block
} else {
arrContext[j].style.display = "none"; //反之，设置为none
}
}
}
}else if(method == "onclick"){
arrIp[i].onclick = function() { //为当前按钮添加鼠标移入事件
this.className = "btn default ip1"; //this指向当前按钮，设置当前元素的class名
var sub1 = this.parentNode.childNodes; //获取当前元素的兄弟节点（包括自己）
for(var j = 0; j < sub1.length; j++) { //遍历按钮元素
if(sub1[j] != this) { //如果不是自身
sub1[j].className = "btn ip1"; //重新给class赋值，删除default
}
}
for(var j = 0; j < arrContext.length; j++) { //遍历内容元素
if(j == this.index) { //如果索引与当前按钮索引一致
arrContext[j].style.display = "block"; //设置display为block
} else {
arrContext[j].style.display = "none"; //反之，设置为none
}
}
}
}
}
}
var arrIp1 = document.getElementsByClassName("ip1");
var arrContext1 = document.getElementsByClassName("context1");
setMouse(arrIp1, arrContext1, "onmouseover");
var arrIp2 = document.getElementsByClassName("ip2");
var arrContext2 = document.getElementsByClassName("context2");
setMouse(arrIp2, arrContext2,"onclick");
</script>
</body>
</html>
这就是今天的几个小案例啦，其中第三个this 索引值比较绕，要多理解
扫一扫
1372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
