189 8069 5689
动手制作一些自己的小作品这样做有几个目的，第一个最重要的就是学习完基础知道并不代表你可以活学活用，一定要在制作作品的过程中了解还有那些更细节的知识点。第二，就是给自己积累编程思想相关的经验，这个尤其重要，为什么老牌的程序员一看到项目，脑海里就很快有了编程思路呢？就是这么来的。第三，在制作作品的过程中你会发现太多你从前没接触过的问题了，甚至可能完成一个有点难度的程序都是问题，那这代表什么？比如更细化的浏览器兼容性知识、代码执行效率知识等等，这方面你在日后的工作中会花掉你大量的精力，所以制作作品，在这些方面多磨练。第四，学习更高级的知识，比如面向对像，扩展库的使用，比如Jquery、Spry等等，另外还有自己的编程思想的建立。纯的学习JAVASCRIPT 基本除了计算什么也做不了(说的有些大了)
成都创新互联是一家集网站建设,彭州企业网站建设,彭州品牌网站建设,网站定制,彭州网站建设报价,网络营销,网络优化,彭州网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
JavaScript需要和HTML CSS DHTML 浏览器内置对象等 结合来使用.
你看到网站页面的各种特效.还有无刷提交数据.等都会涉及到JavaScript.
比如说我们2个回答的页面右边 分享功能就涉及到JavaScript.它是一个浮动框框.通过JAVAScript计算和调用一些其他"程序"(怕你不明白说程序).让右边的分享 保持在上下同一位置 不管你怎么滚动页面
JavaScript可以通过CreateElement方法动态创建标签，具体示例如下：
示例1：定义方法创建一个label标签
var createLabel = function(id, name, value) {
//新建lable标签
var label_var = document.createElement("label");
//新建id属性
var label_id = document.createAttribute("id");
label_id.nodeValue = id;
//新建文本节点
var label_text = document.createTextNode(value);
//为label标签添加属性和文本
label_var.setAttributeNode(label_id);
var label_css = document.createAttribute("class");
label_css.nodeValue = "select_css";
label_var.setAttributeNode(label_css);
label_var.appendChild(label_text);
//返回新标签
return label_var;
}
示例2：定义方法创建input标签（主要为Text），并为标签添加id,name,value,type 属性，并绑定事件
var createInput = function(id, name, value, type, width, height, event) {
var var_input = null;
var input_event_attr_IE = "";
//event表示希望绑定的事件，可能是多个，如果为多个，则拆分一下
if (event != null event != "") {
var event_array_IE = event.toString().split('|');
for (var i = 0; i event_array_IE.length; i++) {
var event_IE = event_array_IE[i].split('==');
input_event_attr_IE += " " + event_IE[0] + "='' ";
}
}
try {//定义变量实现IE6.0和IE7.0兼容。
var_input = document.createElement("input " + input_event_attr_IE + "");
} catch (e) {
var_input = document.createElement("input");
}
//定义id、name、type、value和style属性
var input_id = document.createAttribute("id");
input_id.nodeValue = id;
var input_name = document.createAttribute("name");
input_name.nodeValue = name;
var input_type = document.createAttribute("type");
input_type.nodeValue = type;
var input_value = document.createAttribute("value");
input_value.nodeValue = value;
var input_style = document.createAttribute("style");
var input_style_str = "";
//设置宽和高
if (width != null width != "") {
input_style_str += "width:" + width + "px;";
} else {
input_style_str += "width:30px;";
}
if (height != null height != "") {
input_style_str += "height:" + height + "px;";
}
if (event != null event != "") {
var event_array = event.toString().split('|');
//循环绑定事件
for (var i = 0; i event_array.length; i++) {
var events = event_array[i].split('==');
var input_event = document.createAttribute(events[0]);
input_event.nodeValue = events[1];
var_input.setAttributeNode(input_event);
}
}
//添加属性
var_input.setAttributeNode(input_type);
input_style.nodeValue = input_style_str;
try {
var_input.setAttributeNode(input_style);
} catch (e) {
width = (width == null || width == "") ? "30" : width;
var_input.setAttribute("width", width);
if (height != null height != "") {
var_input.setAttribute("height", height);
}
}
//为标签添加属性
var_input.setAttributeNode(input_id);
var_input.setAttributeNode(input_name);
var_input.setAttributeNode(input_value);
return var_input;
}
例如：在做一个超链接传值时其中一个参数的值正好是本html页面中一个隐藏域的值 asp:HiddenField ID="hidTest" Value="123456" runat="server"/input type="hidden" id="txtTest"value="测试数据" runat="server"/diviframe src="demo.aspx?demo=隐藏域的值"/iframe/div当然这种方式可以通过给iframe添加一runat="server"然后在后台进行赋值等，这里不再赘述。下面接着说本文的简单操作如果被获取值的控件是服务器端控件则只需要写成iframe src="demo.aspx?demo='%=hidTest.Value %'"/iframe如果被获取值的控件是客户端控件时要在控件后边添加runat="server"iframe src="demo.aspx?demo='%=txt.Value %'"/iframe这样在链接到的demo.aspx页面就会获取到本页面中隐藏域的值了。
一般来说，实现图片的放大缩小功能都用到了比较大的封装插件，特别是以jQuery插件居多，而实际上单纯实现对原图本身的放大缩小，用简单几行原生JS代码就可以做到。在今天分享的这个实例中，点击放大按钮不松鼠标，图片会不断的逐渐放大，当然也可以点一下放大一点，点击缩小按钮则反之，有需要的朋友可以考虑收藏备用哦
以下为全部代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejavascript控制图片缩小或者放大/title
/head
body
script type="text/javascript"
var oTime;
function changeSize(id,action){
var obj=document.getElementById(id);
obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%';
oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100);
}
document.onmouseup=function(){
window.clearTimeout(oTime);
}
/script
div style="height:350px; overflow: auto;"
img id="headImg" src="
button onmousedown="changeSize('headImg','+');" onmouseup="window.clearTimeout(oTime);"放大/button
button onmousedown="changeSize('headImg','-');" onmouseup="window.clearTimeout(oTime);"缩小/button
/body
/html
第一个页面中有两个图片，当点击的时候能在第二个页面中获得它的属性值（）通过js进行传值：
第一个页面：
[html]
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
script type="text/javascript"
function test(){
var img1= document.getElementById("img1");
var img2= document.getElementById("img2");
//获得alt的属性
var parm1=img1.getAttribute("alt");
var parm2=img2.getAttribute("alt");
//url
img1.onclick=function(){
var myurl="test2.html"+"?"+"parm1="+parm1;
window.location.assign(myurl);
}
img2.onclick=function(){
var myurl="test2.html"+"?"+"parm2="+parm2;
window.location.assign(myurl);
}
}
/script
/head
body onload="test();"
img src="1.jpg" id="img1" alt="myimg1"
img src="2.jpg" id="img2" alt="myimg2"
/body
/html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
script type="text/javascript"
function test(){
var img1= document.getElementById("img1");
var img2= document.getElementById("img2");
//获得alt的属性
var parm1=img1.getAttribute("alt");
var parm2=img2.getAttribute("alt");
//url
img1.onclick=function(){
var myurl="test2.html"+"?"+"parm1="+parm1;
window.location.assign(myurl);
}
img2.onclick=function(){
var myurl="test2.html"+"?"+"parm2="+parm2;
window.location.assign(myurl);
}
}
/script
/head
body onload="test();"
img src="1.jpg" id="img1" alt="myimg1"
img src="2.jpg" id="img2" alt="myimg2"
/body
/html
第二个页面：
[html]
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titletest2/title
script type="text/javascript"
function getvalue()
{
///test2.html?parm1=myimg1parm2=myimg2
//获得第一个属性
var url=location.href;
var tmp1=url.split("?")[1];
var tmp2=tmp1.split("")[0];
var tmp3=tmp2.split("=")[1];
var parm1=tmp3;
//获得第二个属性
/*
var tmp9=url.split("?")[1];
var tmp4=tmp9.split("")[1];
var tmp5=tmp4.split("=")[1];
var parm2=tmp5;
*/
var inhtml= document.getElementById("inhtml");
inhtml.innerHTML=parm1;
//alert(parm1);
}
/script
/head
body onload="getvalue();"
h2测试/h2
span id="inhtml" /span
/body
/html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titletest2/title
script type="text/javascript"
function getvalue()
{
///test2.html?parm1=myimg1parm2=myimg2
//获得第一个属性
var url=location.href;
var tmp1=url.split("?")[1];
var tmp2=tmp1.split("")[0];
var tmp3=tmp2.split("=")[1];
var parm1=tmp3;
//获得第二个属性
/*
var tmp9=url.split("?")[1];
var tmp4=tmp9.split("")[1];
var tmp5=tmp4.split("=")[1];
var parm2=tmp5;
*/
var inhtml= document.getElementById("inhtml");
inhtml.innerHTML=parm1;
//alert(parm1);
}
/script
/head
body onload="getvalue();"
h2测试/h2
span id="inhtml" /span
/body
/html