var sum = 0; for (var i = 0;i <= 100;i++){ sum += i; } console.log(sum);
for (var i = 1;i<=100;i++){ if(i % 2 === 0){ console.log(i); } }
for(var i = 1;i <= 6;i++){ for(var j =1;j<=i;j++){ document.write('*'); } document.write('<br>'); }
for(var i = 1;i <= 6;i++){ for(var s =i;s<6;s++){ document.write(' '); } for(var j=1;j<=2*i-1;j++){ document.write('*'); }document.write('<br>'); }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var oDiv = document.getElementById('box');
oDiv.onclick=function () {
oDiv.style.backgroundColor = 'green';
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var oDiv = document.getElementById('box');
var isRed = true;
oDiv.onclick = function () {
if (isRed){
oDiv.style.backgroundColor = 'green';
isRed = false;
}else{
oDiv.style.backgroundColor = 'red';
isRed = true;
}
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按按钮改变值</title>
</head>
<body>
<input type="text" name="user" value="123" id="oinput">
<button id="btn">按钮</button>
<div id="box">
哈哈哈
<h3>alex</h3>
</div>
<script type="text/javascript">
function $(id) {
return document.getElementById(id)
}
$('btn').onclick = function () {
$('btn').innerText = 'asd';
$('box').innerHTML = '<h2>yuan</h2>';
$('oinput').value=321;
};
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
display:block;
}
</style>
</head>
<body>
<a href="javarscript:void(0);">
<img src="images/img.png" alt="图片" id="prev">
</a>
<script type="text/javascript">
var oImg = document.getElementsByTagName('img')[0];
oImg.onmouseover = function () {
this.src = 'images/img-hover.png';
};
oImg.onmouseleave = function () {
this.src= 'images/img.png';
};
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
100px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div id="box"></div>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var isShow = true;
$('btn').onclick = function () {
if (isShow){
$('btn').innerText = '显示';
$('box').style.display = 'none';
isShow = false;
}else{
$('btn').innerText = '隐藏';
$('box').style.display = 'block';
isShow = true;
}
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
100px;
height:200px;
background-color: red;
}
.active{
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div id="box"></div>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var isShow = true;
$('btn').onclick = function () {
if(isShow){
$('box').className += ' active';
this.innerText = '显示';
isShow = false;
}else{
$('box').className = 'box';
this.innerText = '隐藏';
isShow = true;
}
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="create">显示</button>
<button id="remove">隐藏</button>
<div id="box">
<h4 id="ha">哈哈</h4>
</div>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
$('create').onclick = function () {
var oP = document.createElement('h2');//创建h2
oP.innerText = 'alex';//文本内容设置
$('box').appendChild(oP);//父元素添加子元素
$('remove').onclick = function () {
$('box').removeChild(oP);//父元素移除子元素
};
};
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
body,html{
100%;
height:100%;
}
#bg{
position: relative;
top:0;
left:0;
height:100%;
100%;
background-color:rgba(0,0,0,.3)
}
#login{
300px;
height:300px;
background-color: yellow;
position: relative;
line-height: 300px;
text-align: center;
border-radius: 3px;
margin:0 auto;
top:25%;
}
#close{
position:absolute;
20px;
background-color: red;
top:0;
right:0;
line-height: 20px;
text-align: center;
}
</style>
</head>
<body>
<button id="btn">登录</button>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
//获取标签
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');
//获取id值
oDiv.id='bg';
oP.id = 'login';
oSpan.id='close';
//填充文本
oP.innerHTML = '登录框弹出';
oSpan.innerText = 'X';
//连环追加节点
oDiv.appendChild(oP);
oP.appendChild(oSpan);
$('btn').onclick = function () {
this.parentNode.appendChild(oDiv);
this.style.display = 'none';
};
oSpan.onclick =function () {
oDiv.parentNode.removeChild(oDiv);
$('btn').style.display='inline-block';
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
button{
100px;
height:40px;
cursor:pointer;
margin-left: 10px;
}
button.active {
background-color: green;
}
</style>
</head>
<body>
<button class="active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button');
for(var i = 0;i<oBtn.length;i++){
oBtn[i].onmouseover = function () { //注意是oBtn[i]
for(var j = 0;j<oBtn.length;j++){
oBtn[j].className = '';//其余无active类，颜色不发生变化
}
this.className = 'active';//添加active类，颜色改变
}
}
/*鼠标离开，所有按钮都恢复为无色*/
for (var i = 0;i<oBtn.length;i++){
oBtn[i].onmouseout = function () {
this.className = '';
}
}
</script>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
ul{
list-style: none;
100%;
overflow: hidden;
}
#tab{
480px;
margin:20px auto;
border:1px solid red;
}
li{
float:left;
160px;
line-height:60px;
text-align: center;
background-color: #ccc;
}
#tab ul li a{
100%;
height:100%;
text-decoration: none;
color: black;
display: block;
}
li.active{
background-color: red;
}
#tab p{
height:200px;
line-height: 200px;
text-align: center;
display: none;
background-color: red;
}
#tab p.active {
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="javarscript:;">首页</a></li>
<li><a href="javarscript:;">新闻</a></li>
<li><a href="javarscript:;">图片</a></li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
<script>
var tabLi = document.getElementsByTagName('li');
var tabP = document.getElementsByTagName('p');
for (var i = 0;i<tabLi.length;i++){
tabLi[i].index = i;//在li中添加对应的索引
tabLi[i].onclick = function () {
for (var j = 0;j<tabLi.length;j++){
tabLi[j].className = '';
tabP[j].className = '';
}
this.className = 'active';
tabP[this.index].className = 'active';//找到对应索引的tabP，添加类名
}
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
ul{
list-style: none;
100%;
overflow: hidden;
}
#tab{
480px;
margin:20px auto;
border:1px solid red;
}
li{
float:left;
160px;
line-height:60px;
text-align: center;
background-color: #ccc;
}
#tab ul li a{
100%;
height:100%;
text-decoration: none;
color: black;
display: block;
}
li.active{
background-color: red;
}
#tab p{
height:200px;
line-height: 200px;
text-align: center;
display: none;
background-color: red;
}
#tab p.active {
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="javarscript:;">首页</a></li>
<li><a href="javarscript:;">新闻</a></li>
<li><a href="javarscript:;">图片</a></li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
<script>
var tabLi = document.getElementsByTagName('li');
var tabP = document.getElementsByTagName('p');
for (let i = 0;i<tabLi.length;i++){
tabLi[i].onclick = function () {
for (var j = 0;j<tabLi.length;j++){
tabLi[j].className = '';
tabP[j].className = '';
}
this.className = 'active';
tabP[i].className = 'active';//找到对应索引的tabP，添加类名
}
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
100px;
height:100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="animate">开始动画</button>
<button id="clear">清除动画</button>
<script>
var oAnimate = document.getElementById('animate');
var oClear = document.getElementById('clear');
var oDiv = document.getElementById('box');
var num=0;
let timer;
oAnimate.onclick=function () {
clearInterval(timer);//清除原来的定时器
timer= setInterval(function () { //设置定时器
num+=3;
console.log(num);
oDiv.style.marginLeft = num +'px';
},100);
};
oClear.onclick =function () {
clearInterval(timer)
}
</script>
</body>
</html>