<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:#ccc;
}
</style>
<script>
window.onload = function(){
var Div1 = document.getElementById('div1');
Div1.onmouseover = function(){
Div1.style.width='300px';
Div1.style.backgroundColor='#FF0000';
};
Div1.onmouseout = function(){
Div1.style.width='500px';
Div1.style.backgroundColor='#32C54E';
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script>
window.onload = function (){
var oBtn =document.getElementById('btn');
var oText =document.getElementById('text');
var oSelect =document.getElementById('select');
var oImg =document.getElementById('img');
oBtn.onclick = function (){
oBtn.value = 'button'; //007 功能：鼠标点击事件，点击后，修改按钮的value值为'button'
oText.value = '1234456'; //008 功能：鼠标点击事件，点击后，修改单行文本框的value值为'1234456'
oText.value = oSelect.value; //009 功能：鼠标点击事件，点击后，修改单行文本框的value值为单选框的value值
oImg.src = oText.value; //010 功能：鼠标点击事件，点击后，根据单行文本框的图片地址 修改图片 网络图片地址也可以，
//并且输入什么显示什么，输入html标签也可以显示出来。
};
};
</script>
</head>
<body>
<input id="text" type="text" />
<select id="select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<input id="btn" type="button" value="按钮" />
<br/>
<img id="img" src="../../../images/logo.png" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script>
window.onload = function (){
var oBtn =document.getElementById('btn');
var oText =document.getElementById('text');
var oP =document.getElementById('p');
oBtn.onclick = function (){
alert(oP.innerHTML); //011 功能：弹出框，能读取元素之间的内容
oP.innerHTML = oText.value; //012 功能：弹出框，能修改元素之间的内容
};
};
</script>
</head>
<body>
<input id="text" type="text" />
<input id="btn" type="button" value="按钮" />
<br/>
<p id="p">这是一段文字。。。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>往控件提交文字</title>
<style type="text/css">
#div{
width: 240px;
height: 200px;
border: 1px solid #32C54E;
background-color: #CCCCCC;
padding: 10px;
}
</style>
<script>
window.onload = function (){
var oDiv = document.getElementById('div');
var oSpan = document.getElementById('span');
var oText = document.getElementById('text');
var oBtn = document.getElementById('btn');
//添加：oDiv.innerHTML + oText.value; 原来的东西+新的东西
//a=a+b; a+=b;
oBtn.onclick = function (){ //匿名函数
oDiv.innerHTML = oDiv.innerHTML +oSpan.innerHTML + oText.value +'<br/>';
oText.value = '';
};
};
</script>
</head>
<body>
<div id="div"></div>
<span id="span">课堂：</span>
<input id="text" type="text" />
<input id="btn" type="button" value="提交" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮让文字变大变小</title>
<style type="text/css">
#div{
width: 240px;
height: 200px;
border: 1px solid #32C54E;
background-color: #CCCCCC;
padding: 10px;
}
</style>
<script>
window.onload = function (){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oP = document.getElementById('p');
var num = 15; //全局变量
oBtn1.onclick = function (){
num = num - 1;
oP.style.fontSize = num + 'px';
};
oBtn2.onclick = function (){
num = num + 1; //num+=1与num=num+1相同 num++ 每次递增一个数
oP.style.fontSize = num + 'px'; //js中不允许出现‘-’ font-size fontSize margin-left marginLeft
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<p id="p">简单的想法：把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html，有无从下手的地方可以用firebug, chrome调试工具分析网站结构样式。如果技术熟练自信可以自己先写，写完之后在对比，以其来找寻自己的差距。结构是网站的骨架，如果写的不合理，将是bug产生的重要根源，所以学习分析大型网站的布局样式对初学者来说帮助是很大的。大多数初学者由于对技术的不自信，html结构往往写的很少，而且期望在少的结构上尽可能多的实现页面效果，这样无非加大了html结构所承载的样式属性，众多属性交织在一起就会容易产生bug。qq,sina,163三大官网撸一遍，基本是熟练了。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改样式与颜色</title>
<style type="text/css">
#div{
width: 240px;
height: 200px;
border: 1px solid #32C54E;
background-color: #CCCCCC;
padding: 10px;
}
.red{
width: 500px;
background-color: #BB92C3;
padding: 20px;
color: #3F3F3F;
border: 10px solid #ccc;
}
.yellow{
width: 800px;
background-color: #CCCCCC;
padding: 10px;
color: #FFA500;
border: 20px solid #32C54E;
}
</style>
<script>
window.onload = function (){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oBtn4 = document.getElementById('btn4');
var oP = document.getElementById('p');
var num = 15; //全局变量
oBtn1.onclick = function (){
num = num - 1;
oP.style.fontSize = num + 'px';
};
oBtn2.onclick = function (){
num = num + 1; //num+=1与num=num+1相同 num++ 每次递增一个数
oP.style.fontSize = num + 'px'; //js中不允许出现‘-’ 注意大小写 font-size fontSize
};
oBtn3.onclick = function (){
/*
oP.style.width = '300px';
oP.style.backgroundColor = '#BB92C3';
oP.style.padding = '20px';
oP.style.color = '#3F3F3F';
oP.style.border = '10px solid #ccc';
*/
oP.className = 'red'; // class是保留字 class=> className
};
oBtn4.onclick = function (){
oP.className = 'yellow';
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="紫色" />
<input id="btn4" type="button" value="黄色" />
<p id="p">简单的想法：把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html，有无从下手的地方可以用firebug, chrome调试工具分析网站结构样式。如果技术熟练自信可以自己先写，写完之后在对比，以其来找寻自己的差距。结构是网站的骨架，如果写的不合理，将是bug产生的重要根源，所以学习分析大型网站的布局样式对初学者来说帮助是很大的。大多数初学者由于对技术的不自信，html结构往往写的很少，而且期望在少的结构上尽可能多的实现页面效果，这样无非加大了html结构所承载的样式属性，众多属性交织在一起就会容易产生bug。qq,sina,163三大官网撸一遍，基本是熟练了。</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改样式与颜色</title>
<style type="text/css">
#div{
width: 100px;
height: 100px;
border: 1px solid #DB7093;
}
</style>
<script>
window.onload = function(){
var oAttr = document.getElementById('attr'); //将attr 写成了atter导致报错为null空值。
var oVal = document.getElementById('val');
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div');
oBtn.onclick = function(){
oAttr.value // width backgoundColor
oVal.value // 200px red
// oDiv.style.width = oVal.value; //.后面的值无法随便修改
oDiv.style[oAttr.value]= oVal.value; //[]里面的值可以随便修改
};
};
</script>
</head>
<body>
请输入属性名称： <input id="attr" type="text" /> <br />
请输入属性值： <input id="val" type="text" />
<input id="btn" type="button" value="确定"/>
<div id="div"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮让文字变大变小</title>
<style type="text/css">
#div{
width: 240px;
height: 200px;
border: 1px solid #32C54E;
background-color: #CCCCCC;
padding: 10px;
}
</style>
<script>
window.onload = function (){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oP = document.getElementById('p');
var num = 15;
oBtn1.onclick = function (){
if(num>12){
num = num - 1;
oP.style.fontSize = num + 'px';
};
};
oBtn2.onclick = function (){
if(num<22){
num = num + 1;
oP.style.fontSize = num + 'px';
alert(num);
};
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<p id="p">简单的想法：把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html，有无从下手的地方可以用firebug, chrome调试工具分析网站结构样式。如果技术熟练自信可以自己先写，写完之后在对比，以其来找寻自己的差距。</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>往控件提交文字</title>
<style type="text/css">
#div{
width: 240px;
height: 200px;
border: 1px solid #32C54E;
background-color: #CCCCCC;
padding: 10px;
}
</style>
<script>
window.onload = function (){
var oDiv = document.getElementById('div');
var oSpan = document.getElementById('span');
var oText = document.getElementById('text');
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
if(oText.value == ''){
alert('请输入内容')
}else{
oDiv.innerHTML = oDiv.innerHTML +oSpan.innerHTML + oText.value +'<br/>';
oText.value = '';
};
};
};
</script>
</head>
<body>
<div id="div"></div>
<span id="span">课堂：</span>
<input id="text" type="text" />
<input id="btn" type="button" value="提交" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>往控件提交文字</title>
<style type="text/css">
#div{
width: 240px;
height: 200px;
border: 1px solid #32C54E;
background-color: #CCCCCC;
padding: 10px;
}
</style>
<script>
window.onload = function (){
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
if(oText.value == 'CSS'){
alert('正确');
}else if(oText.value == 'JS'){
alert('正确');
}else if(oText.value == 'HTML'){
alert('正确');
}else{
alert('输入错误');
};
};
};
</script>
</head>
<body>
通关口令：
<input id="text1" type="text" />
<input id="btn" type="button" value="验证" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>往控件提交文字</title>
<style type="text/css">
#div{
width: 240px;
height: 200px;
border: 1px solid #32C54E;
background-color: #CCCCCC;
padding: 10px;
}
</style>
<script>
window.onload = function (){
var oImg = document.getElementById('img');
var onOff = true; //开关：布尔值：true真 1-----false 假 0
oImg.onclick = function (){
if(onOff){
oImg.src = 'images/1.jpg';
onOff = false;
}else{
oImg.src = 'images/2.jpg';
onOff = true;
};
};
};
</script>
</head>
<body>
<img id="img" src="images/1.jpg" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多张图片切换</title>
<style type="text/css">
#content {width: 400px; height: 400px; border: 10px solid #CCCCCC; margin: 40px auto 0; position: relative; background-color: #A9A9A9;}
#content a {width: 40px; height: 40px; background-color: #000000; border: 5px solid #FFFFFF; position: absolute; top: 175px; text-align: center; text-decoration: none; line-height: 40px; color: #FFFFFF; font-size: 30px; font-weight: bold; filter: alpha(opacity:40); opacity: 0.4;}
#content a:hover {filter: alpha(opacity:90); opacity: 0.9;} /*filter: alpha(opacity:60); opacity: 0.6;高亮*/
#prev {left: 10px;}
#next {right: 10px;}
#text,#span{position: absolute; left: 0; width: 400px; height: 30px; line-height: 30px; text-align: center; color: #FFFFFF; background-color: #000000; filter: alpha(opacity:80); opacity: 0.8; }
#text {bottom: 0px; margin: 0px;}
#span {top: 0px; }
#img {width: 400px; height: 400px;}
</style>
<script>
window.onload = function(){
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oText = document.getElementById('text');
var oSpan = document.getElementById('span');
var oImg = document.getElementById('img');
var arrUrl = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg' ];
var arrText = ['中秋佳节','韩国明星剧照','美女','银魂'];
var num = 0;
//初始化
function fnTab(){
oSpan.innerHTML = num+1+'/'+arrText.length; //动态的 1/4
oImg.src = arrUrl[num];
oText.innerHTML = arrText[num];
};
fnTab(); //函数不会主动执行，所以需要调用一下
oPrev.onclick = function(){
num --;
if(num == -1){
num = arrText.length-1; //num等于数组长度减一
};
fnTab();
};
oNext.onclick = function(){
num ++;
if(num == arrText.length){
num = 0;
};
fnTab();
};
};
</script>
</head>
<body>
<div id="content">
<a id="prev" href="javascript:;"> < </a>
<a id="next" href="javascript:;"> > </a>
<p id="text">图片文字加载中.....</p>
<span id="span">数量正在计算中</span>
<img id="img" src=""/>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
</style>
<script>
/*
#list{} var oUl = document.getElementById('list'); //静态方法 只能表示一个
li{} document.getElementsByName('li'); //动态方法，可以表示多个
#list li{} var aLi = oUl.getElementsByTagName('li');
//aLi => [li,li,li] 元素的集合
aLi.length 3
aLi[0]
//在用TagNasme的时候，必须要加上：[]
*/
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
alert(aLi.length);
};
</script>
</head>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
</style>
<script>
window.onload = function(){
//document.title = 123;
//document.body.innerHTML = 'abc'
var aBtn = document.getElementsByTagName('input');
//alert(aBtn.length);
document.body.innerHTML = '<input type ="button" value="按钮"/><input type ="button" value="按钮"/><input type ="button" value="按钮"/>';
//alert(aBtn.length);
aBtn[0].onclick = function (){alert(1);};
aBtn[1].onclick = function (){alert(2);};
aBtn[2].onclick = function (){alert(3);};
};
</script>
</head>
<body>
</body>
</html>
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
