01.练习1-字体缩放+className
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
border: 5px solid red;
padding: 5px;
}
.red{
background: yellow;
color: red;
}
.yellow{
background: red;
color: yellow;
}
</style>
</head>
<body>
<p><button id="big" type="button">+</button>
<button id="small" type="button">-</button>
<button id="red" type="button">红</button>
<button id="yellow" type="button">黄</button></p>
<div id="box">
fdsafdsa fadsgvdf vcx dffsadgasd sda gasfdafd 的广泛受到广泛的是浮点数发大水噶嘎斯哥斯达都是三大
</div>
<script type="text/javascript">
var oBig = document.getElementById('big');
var oSmall = document.getElementById('small');
var oBox = document.getElementById('box');
var oRed = document.getElementById('red');
var oYellow = document.getElementById('yellow');
var fsize = 16;
oBig.onclick = function(){
fsize = fsize + 2;
oBox.style.fontSize = fsize + 'px';
}
oRed.onclick = function(){
oBox.className = 'red';
}
oYellow.onclick = function(){
oBox.className = 'yellow';
}
</script>
</body>
</html>
02.模拟聊天
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 290px;
height: 290px;
padding: 10px;
background: #f3f3f3;
border: 2px solid #000000;
overflow: auto;
/* overflow: hidden; */
margin-bottom: 10px;
}
p{
margin: 0;
}
span{
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var oName = document.getElementById('name');
var oText = document.getElementById('content');
var oBtn = document.getElementById('btn');
var onOff=true;
oBtn.onclick=function(){
if(onOff){
if(oText.value !=null && oText.value !=''){
oBox.innerHTML +='<p>'+ oName.innerHTML+':'+ oText.value +'</p>';
oText.value = '';
}else{
alert('您没有发送内容，请输入');
}
}else{
if(oText.value !=null && oText.value !=''){
oBox.innerHTML +='<p style = "text-align:right;">'+oText.value +':'+ oName.innerHTML+'</p>';
oText.value = '';
}else{
alert('您没有发送内容，请输入');
}
}
oName.onclick = function(){
if(onOff){
oName.innerHTML = '李四';
}else{
oName.innerHTML = '张三';
}
onOff = !onOff;
}
}
}
</script>
</head>
<body>
<div id="box">
</div>
<p>
<span id="name">张三</span>:
<input type="text" name="" id="content" value="" />
<button id="btn" type="button">发送信息</button>
</p>
</body>
</html>
03.[]的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<!--
[]完全等同于.
-->
<p>
<input type="text" name="" id="input1" />
<input type="text" name="" id="input2" />
<button id="btn" type="button">按钮</button>
</p>
<div id="box">
</div>
<script type="text/javascript">
var oBox = document.getElementById('box');
var oBtn = document.getElementById('btn');
var oInp1 = document.getElementById('input1');
var oInp2 = document.getElementById('input2');
oBtn.onclick = function(){
oBox.style[oInp1.value] = oInp2.value;
}
</script>
</body>
</html>
04.数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = [];
for(var i = 1; i < 11; i++){
// 向数组中追加元素,调用数组的push方法,参数个数任意
arr.push(i,-i);//可以放多个
}
//alert(arr.length);// 数组长度
// js中长度可变,类型随意
// arr.length = 0;
// arr = [];
for(var i = 0;i < arr.length;i++){
console.log(arr[i]);
}
</script>
</body>
</html>
05.获取元素的第二种方式-标签名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
var aDiv = document.getElementsByTagName('div');
for(var i = 0;i <aDiv.length;i++){
console.log(aDiv[i].innerHTML);
}
var oBox1 = document.getElementById('box');
var oBox2 = document.getElementsByTagName('div')[0];
</script>
</body>
</html>
06.练习4-li点击
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
</ul>
<script type="text/javascript">
var oList = document.getElementById('list');
var aLi = oList.getElementsByTagName('li');
for(var i =0;i <aLi.length;i++){
aLi[i].onclick = function(){
alert(this.innerHTML);
show(this);
}
}
function show(obj){
alert(obj.innerHTML);
}
</script>
</body>
</html>
07.练习5-动态生成10个div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var color = ['red','yellow','blue'];
for(var i = 0;i<10;i++){
document.body.innerHTML +='<div style="width:50px;height:50px;background:'+color[i%color.length]+'"></div>';
}
</script>
</body>
</html>
08.鼠标移入显示隐藏div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
padding: 0;
margin: 0;
}
#list{
width: 440px;
margin: 150px auto;
}
#list li{
width:100px;
height: 100px;
background: #ffa500;
margin: 5px 5px;
float: left;
position: relative;
}
ul li div{
width:100px;
height: 100px;
background: #000000;
position: relative;
top: -50px;
right: -50px;
z-index: 1;
display: none;
}
</style>
</head>
<body>
<ul id="list">
<li><div>123</div></li>
<li><div>123</div></li>
<li><div>123</div></li>
<li><div>123</div></li>
<li><div>123</div></li>
<li><div>123</div></li>
<li><div>123</div></li>
<li><div>123</div></li>
</ul>
<script type="text/javascript">
var oList = document.getElementById('list');
var aLi = oList.getElementsByTagName('li');
var aDiv = document.getElementsByTagName('div');
for(var i = 0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover = function(){
aDiv[this.index].style.display='block';
}
aLi[i].onmouseout = function(){
aDiv[this.index].style.display='none';
}
}
</script>
</body>
</html>
09.练习6-土豪金对话
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 216px;
height: 355px;
padding: 10px;
background: #f3f3f3;
border: 2px solid #000000;
overflow: auto;
/* overflow: hidden; */
margin-bottom: 10px;
position: absolute;
top: 92px;
left: 25px;
z-index: 2;
}
p{
margin: 0;
}
#pigone{
width: 32px;
height: 30px;
border: 1px solid #888888;
border-radius: 5px;
padding: 3px;
cursor: pointer;
}
#content{
position: absolute;
top: 7px;
left: 50px;
width: 130px;
}
#btn{
position: absolute;
top: 7px;
left: 188px;
width: 45px;
}
#iphone{
position: absolute;
top: 7px;
left: 0px;
}
#duihuakuang{
position: absolute;
top: 473px;
left: 28px;
}
#wenzi1{
margin: auto 0;
border: 1px solid #000;
position: absolute;
top: 5px;
left: 50px;
padding: 5px;
border-radius: 5px;
background: #36ff07;
}
#wenzi2{
margin: auto 0;
border: 1px solid #000;
position: absolute;
top: 6px;
right: 50px;
padding: 5px;
border-radius: 5px;
background: #eeeeee;
}
.neiduihua{
position: relative;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var oImg = document.getElementById('pigone');
var oText = document.getElementById('content');
var oBtn = document.getElementById('btn');
var onOff=true;
oBtn.onclick=function(){
if(onOff){
if(oText.value !=null && oText.value !=''){
oBox.innerHTML +='<p class="neiduihua"> <img style="width: 32px;height: 30px;border: 1px solid #888888;border-radius: 5px;padding: 3px;" src="img/expression1.png" ><spen id="wenzi1">'+ oText.value +'</spen></p>';
oText.value = '';
}else{
alert('您没有发送内容，请输入');
}
}else{
if(oText.value !=null && oText.value !=''){
oBox.innerHTML +='<p class="neiduihua" style = "text-align:right;"><spen id="wenzi2">'+oText.value + '</spen><img style="width: 32px;height: 30px;border: 1px solid #888888;border-radius: 5px;padding: 3px;" src="img/expression2.png" ></p>';
oText.value = '';
}else{
alert('您没有发送内容，请输入');
}
}
}
oImg.onclick = function(){
if(onOff){
oImg.src = 'img/expression2.png';
}else{
oImg.src = 'img/expression1.png';
}
onOff = !onOff;
}
}
</script>
</head>
<body>
<div id="box">
</div>
<img id="iphone" src="图片切换布局练习/mobile.png" >
<p id="duihuakuang">
<img id="pigone" src="img/expression1.png" >
<input type="text" name="" id="content" value="" />
<button id="btn" type="button">发送</button>
</p>
</body>
</html>
