<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="changeInp(-1)">-</button>
<input type="text" id="inp">
<button onclick="changeInp(1)">+</button>
<script>
function changeInp(num){
var inp = document.getElementById("inp");
inp.value = inp.value*1+num;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="season" class="inp" value="春">
<input type="text" name="season" class="inp" value="夏">
<input type="text" name="season" class="inp" value="秋">
<input type="text" name="season" class="inp" value="冬"> <br>
<input type="button" value="显示input的值" onclick="getInput()">
<input type="button" value="显示season的值" onclick="getSeason()">
<div id="box">
</div>
<script>
function getSeason(){
// var seasons = document.getElementsByName("season");
// var seasons = document.getElementsByClassName("inp");
var seasons = document.querySelectorAll("body input.inp");
var str = "";
for(var i=0;i<seasons.length;i++){
str +=seasons[i].value+"<br/>";
}
var box = document.getElementById("box");
box.innerHTML = str;
}
function getInput(){
var inps = document.getElementsByTagName("input");
// 通过标签来获取dom内容
// 循环初始 0 循环结束 inps.length
// 循环操作 或是inps[i].value
///放入到box
var str = "";
// 把所有inps里面的value值存入 str字符串
for(var i=0;i<inps.length;i++){
var val = inps[i].value;
str += val+"<br/>"
}
var box = document.getElementById("box");
// 获取box
box.innerHTML = str;
// 设置box里面的html内容为 str;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>this</title>
</head>
<body>
<div id="tag">我是一行<b>可爱</b>的内容</div>
<input type="text" id="inp" value="我是个坑">
<script>
var tag = document.getElementById("tag");
var text = tag.innerHTML;
// var text = tag.innerText;
alert(text);
// tag.innerHTML = "马上发年终红包!";
tag.innerText = "马上发<b>年终</b>红包!";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
</head>
<body>
<input type="text" id="inp" value="我是个坑">
<script>
var inp = document.getElementById("inp");
alert(inp.value);
inp.value = "你是我的眼！";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
</head>
<body style="font-size: 16px;">
<button onclick="changeSize(22)">大</button>
<button onclick="changeSize(16)">中</button>
<button onclick="changeSize(12)">小</button>
<p>滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中</p>
<script>
function changeSize(num){
document.body.style.fontSize=num+"px";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
<style>
span{ padding: 5px; border:1px solid gray;}
span.active{
border-color:red;
color:red;
}
</style>
</head>
<body >
<span class="active" onclick="changeIt(this)">title1</span>
<span onclick="changeIt(this)">title2</span>
<span onclick="changeIt(this)">title3</span>
<script type="text/javascript">
function changeIt(el){
// el.classList.toggle("active");
// 之前的 active 要去掉active
// el 添加active
var old = document.querySelector("span.active");
// 获取到之前有active的span元素
old.classList.remove("active");
// 删除掉该元素的 activeclass
el.classList.add("active");
// 当前元素添加 active class
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
<style>
span{ padding: 5px; border:1px solid gray;}
span.active{
border-color:red;
color:red;
}
.tabs .content{
display: none;
width: 300px;
height: 300px;
border:1px solid gray;
margin-top: 6px;
}
.tabs .on{display: block;}
</style>
</head>
<body >
<div class="tabs on">
<span class="active title">title1</span>
<span class="title">title2</span>
<span class="title">title3</span>
<div class="content on">content内容1</div>
<div class="content">content内容2</div>
<div class="content">content内容3</div>
</div>
<script>
// 单击span 要知道是第几个span
// 让之前用on的content 去掉class on
// 让第几个content 添加on
var titles = document.querySelectorAll(".tabs .title");
var contents = document.querySelectorAll(".tabs .content");
// for 初始条件0 结束 titles.length
// 操作 让之前用on的content 去掉class on
// 让第i个content 添加on
for(let i=0;i<titles.length;i++){
titles[i].onclick =function(){
console.log(i);
var old = document.querySelector(".tabs .content.on");
// 找到之前有on的content
old.classList.remove("on");
// 去掉on
contents[i].classList.add("on");
// 给和当前点击title下标一样的content 添加 on
var oldt = document.querySelector(".tabs .title.active");
oldt.classList.remove("active");
titles[i].classList.add("active");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选项卡</title>
<style>
.tabs .title{
display: inline-block;
height: 48px;
padding: 0 15px;
line-height: 48px;
border:1px solid gray;
}
.tabs .contents{
position: relative;
width: 300px;
height: 300px;
}
.tabs .content{
width: 300px;
height: 300px;
border:1px solid gray;
position: absolute;
/* display: none; */
opacity: 0;
}
@keyframes fadeIn{
from{opacity: 0; transform:translate(300px,0);}
to{ opacity: 1; transform:translate(0,0);}
}
@keyframes fadeOut{
from{opacity:1; transform:translate(0,0);}
to{ opacity: 0; transform:translate(-300px,0);}
}
.tabs .on{
display: block;
opacity: 1;
animation: fadeIn 0.4s ease;
}
.tabs .off{
animation: fadeOut 0.4s ease;
}
.tabs .active{
color:red;
border-color:red;
}
</style>
</head>
<body>
<div class="tabs">
<div class="titles">
<span class="title active">title1</span>
<span class="title">title2</span>
<span class="title">title3</span>
</div>
<div class="contents">
<div class="content on">内容1</div>
<div class="content">内容2</div>
<div class="content">内容3</div>
</div>
</div>
<script>
// 单击第几个title就应该让第几个content显示 添加class on
// 以前显示的应该隐藏 删除class on
// 每一个都需要添加单击事件 for
var titles = document.querySelectorAll(".tabs .title");
// 选择所有的title
var contents = document.querySelectorAll(".tabs .content");
for(let i=0; i<titles.length;i++){
titles[i].onclick=function(){
console.log("当前是第",i,"个title");
var old = document.querySelector(".tabs .on");
// 找到以前有on的content元素
old.classList.remove("on");
old.classList.add("off");
setTimeout(function(){old.classList.remove("off");},400)
// 删除on class
contents[i].classList.add("on");
// 给当前对应的content 添加 on class
var oldt = document.querySelector(".tabs .active");
oldt.classList.remove("active");
titles[i].classList.add("active");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选项卡</title>
<style>
.tabs .title{
display: inline-block;
height: 48px;
padding: 0 15px;
line-height: 48px;
border:1px solid gray;
}
.tabs .contents{
position: relative;
width: 300px;
height: 300px;
}
.tabs .content{
width: 300px;
height: 300px;
border:1px solid gray;
position: absolute;
/* display: none; */
opacity: 0;
}
@keyframes fadeIn{
from{opacity: 0; transform:translate(300px,0);}
to{ opacity: 1; transform:translate(0,0);}
}
@keyframes fadeOut{
from{opacity:1; transform:translate(0,0);}
to{ opacity: 0; transform:translate(-300px,0);}
}
.tabs .on{
display: block;
opacity: 1;
animation: fadeIn 0.4s ease;
}
.tabs .off{
animation: fadeOut 0.4s ease;
}
.tabs .active{
color:red;
border-color:red;
}
</style>
</head>
<body>
<div class="tabs">
<div class="titles">
<span class="title active">title1</span>
<span class="title">title2</span>
<span class="title">title3</span>
</div>
<div class="contents">
<div class="content on">内容1</div>
<div class="content">内容2</div>
<div class="content">内容3</div>
</div>
</div>
<script>
// 单击第几个title就应该让第几个content显示 添加class on
// 以前显示的应该隐藏 删除class on
// 每一个都需要添加单击事件 for
var titles = document.querySelectorAll(".tabs .title");
// 选择所有的title
var contents = document.querySelectorAll(".tabs .content");
for(let i=0; i<titles.length;i++){
titles[i].onclick=function(){
console.log("当前是第",i,"个title");
var old = document.querySelector(".tabs .on");
// 找到以前有on的content元素
old.classList.remove("on");
old.classList.add("off");
setTimeout(function(){old.classList.remove("off");},400)
// 删除on class
contents[i].classList.add("on");
// 给当前对应的content 添加 on class
var oldt = document.querySelector(".tabs .active");
oldt.classList.remove("active");
titles[i].classList.add("active");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" id="all"> 全选 <br>
<input type="checkbox" name="sub" onchange="changeIt()">
<input type="checkbox" name="sub" onchange="changeIt()">
<input type="checkbox" name="sub" onchange="changeIt()">
<input type="checkbox" name="sub" onchange="changeIt()">
<script>
var all = document.getElementById("all");
// 选择all input
var subs = document.getElementsByName("sub");
// 选择所有的子选框
// subs单击 for 0 subs.length; 如果只要有一个为sub值为false 那么all的值就为false
// sub 全部都为true那么all才为true
// 每个sub change时候都会 执行changeIt函数
function changeIt(){
var val = true; // val的默认值为true （all的checked）
for(var i=0;i<subs.length;i++){
var sel = subs[i].checked;
// 获取到每个子元素的checked值
// 如果值为false
if(sel==false){
val = sel; // 重新赋值false给val
break; //终止循环
}
}
all.checked = val;
// 循环结束的时候我们设置all的checked值
}
// 当all发生改变时候 执行 匿名函数
all.onchange=function(){
var val = all.checked;
// 获取到all的值
console.log(val);
for(var i=0;i<subs.length;i++){
subs[i].checked = val;
// 让每一个子选择框的checked值都和all的checked值保持一致
}
}
</script>
</body>
</html>
