22
来源：互联网 发布：报税软件 编辑：程序博客网 时间：2024/05/22 08:03
<!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 backgoundColoroVal.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 假 0oImg.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/4oImg.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 3aLi[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>阅读全文
0 0
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- 22
- Material Design之RecyclerView基本讲解与瀑布流的实现
- pandas 计算指标/哑变量
- opencv-python(13):Canny边缘检测
- JAVA_文件上传（html，js，后台逻辑）
- c++关于const和const*
- 22
- 大数据-极值数据学院
- sdnu1037约数之和
- 飞速（FS）数据中心级交换机为什么受欢迎？
- BigDecimal
- tomcat启动报错too low setting for -Xss stackoverflow
- Mac OS 在终端未启动的情况下，快速调出终端
- Java基础之理解Annotation
- Mapreduce实现倒排索引建立
