`
fengyie007
  • 浏览: 153080 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JAVASCRIPT精彩200例(三)

阅读更多

101.饼图
<style>
v\:* { behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
.shape { behavior: url(#default#VML) }
</style>
<script language="javascript">
function show(pie)
{
pie.strokecolor=pie.fillcolor;
pie.strokeweight=10;
div1.innerHTML="<font size=2 color=red> " + pie.id +"</font> <font size=2>" + pie.title + "</font>";
}
function hide(pie)
{
pie.strokecolor="white";
pie.strokeweight=1;
div1.innerHTML="";
}
</script>
</head>
<body>
<v:group style='width: 5cm; height: 5cm' coordorigin='0,0' coordsize='250,250'>
<v:shape id='asp技术' style='width:10;height:10;top:10;left:0' title='得票数:6 比例:40.00%'

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'

CoordSize='10,10' strokecolor='white' fillcolor='#ffff33'><v:path v='m 300,200 ae

300,200,200,150,0,9437184 xe'
/></v:shape>
<v:shape id='php' style='width:10;height:10;top:10;left:0' title='得票数:1 比例:6.67%'

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'

CoordSize='10,10' strokecolor='white' fillcolor='#ff9933'><v:path v='m 300,200 ae

300,200,200,150,9437184,1572864 xe'
/></v:shape>
<v:shape id='jsp' style='width:10;height:10;top:10;left:0' title='得票数:2 比例:13.33%'

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'

CoordSize='10,10' strokecolor='white' fillcolor='#3399ff'><v:path v='m 300,200 ae

300,200,200,150,11010048,3145728 xe'
/></v:shape>
<v:shape id='c#写的.netWEB程序' style='width:10;height:10;top:10;left:0' title='得票数:3 比例:20.00%'

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'

CoordSize='10,10' strokecolor='white' fillcolor='#99ff33'><v:path v='m 300,200 ae

300,200,200,150,14155776,4718592 xe'
/></v:shape>
<v:shape id='vb.net写的.netWEB程序' style='width:10;height:10;top:10;left:0' title='得票数:2 比例:13.33%'

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'

CoordSize='10,10' strokecolor='white' fillcolor='#ff6600'><v:path v='m 300,200 ae

300,200,200,150,18874368,3145728 xe'
/></v:shape>
<v:shape id='xml技术' style='width:10;height:10;top:10;left:0' title='得票数:1 比例:6.67%'

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'

CoordSize='10,10' strokecolor='white' fillcolor='#ff99ff'><v:path v='m 300,200 ae

300,200,200,150,22020096,1572864 xe'
/></v:shape>
</v:group>

<v:group style='width: 6cm; height: 6cm' coordorigin='0,0' coordsize='250,250'>
<v:rect style='height:10;width:15;top:0;left:10' fillcolor='#ffff33'/>
<v:rect style='height:28;width:100;top:0;left:30' stroked='false'><v:textbox

style='fontsize:2'>asp技术</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:30;left:10' fillcolor='#ff9933'/>
<v:rect style='height:28;width:100;top:30;left:30' stroked='false'><v:textbox

style='fontsize:2'>php</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:60;left:10' fillcolor='#3399ff'/>
<v:rect style='height:28;width:100;top:60;left:30' stroked='false'><v:textbox

style='fontsize:2'>jsp</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:90;left:10' fillcolor='#99ff33'/>
<v:rect style='height:28;width:100;top:90;left:30' stroked='false'><v:textbox

style='fontsize:2'>c#写的.netWEB程序</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:120;left:10' fillcolor='#ff6600'/>
<v:rect style='height:28;width:100;top:120;left:30' stroked='false'><v:textbox style='fontsize:2'>vb.net

写的.netWEB程序</v:textbox/></v:rect>
<v:rect style='height:10;width:15;top:150;left:10' fillcolor='#ff99ff'/>
<v:rect style='height:28;width:100;top:150;left:30' stroked='false'><v:textbox style='fontsize:2'>xml技术

</v:textbox/></v:rect>
</v:group>

<div style="position: absolute; left: 10; top: 10; width: 760; height:16">
 <table border="1" cellpadding="2" cellspacing="2" cellpadding="0" cellspacing="0"

style="border-collapse: collapse" bordercolor="#CCCCCC" width="100%" ID="Table1">
  <tr>
   <td width="100%" id=div1> </td>
  </tr>
 </table>
</div>//


102.是一个特殊的容器,想装个网页都行
<button><iframe src="http://www.google.com/"></iframe></button>//button


103.外部的html代码
event.srcElement.outerHTML//


104.标识当前的IE事件的触发器
event.srcElement和event.keyCode//


105.事件类型
event.type//


106.动态改变类型
<style>
.Overnone { border-width:0;background-color:darkblue;cursor:default;color:gold;width:115}
.Outnone {border-width:0;background-color:white;cursor:default;width:115}
</style>
<input class=Outnone onmouseover=this.className='Overnone' >//


107.页面翻转
<html dir=rtl></html>//


108.滚屏
parent.scroll(x,y);//

<body onload="s=0" onDblClick="s=setInterval('scrollBy(0, 1)',10)" onClick="clearInterval(s)">//


109.改变状态栏
self.status ="";//


110.改变窗口大小
window.resizeTo(200,300);//


111.改变鼠标样式
style
BODY{CURSOR: url('mouse.ani');
SCROLLBAR-BASE-COLOR: #506AA8;
SCROLLBAR-ARROW-COLOR: #14213F;
}//


112.背景透明
<input type="button" value="Button" style="background-color: transparent; border: 0;">//


113.鼠标为等待形状
<input type=button onclick="this.style.cursor='wait'">//


114.调用父窗口的函数
opener.fucntion1();//


115.body的内部html代码
<input type="button" onclick="alert(code.document.body.innerHTML)" value="查看">//


116.框架中调用父窗口的函数
<INPUT TYPE='button' onclick='parent.test();' value='调用parent窗口的函数'>//


117.交换节点
<table width=200 height=200 border>
<tr><td id=c1>CELL_1</td></tr>
<tr><td id=c2>CELL_2</td></tr>
</table>
<br>
<input type="button" value="swap row" onclick="c1.swapNode(c2)">//


118.删除节点
<table width=200 height=200 border>
<tr id=trall><td id=c1>CELL_1</td></tr>
<tr><td id=c2>CELL_2</td></tr>
</table>
<br>
<input type="button" value="swap row" onclick="trall.removeNode(c2)">//


119.添加节点
addNode()//


120.获得事件的父与子标签
event.srcElement.children[0]和event.srcElement.parentElement //



121.集中为按钮改变颜色
<style>
button{benc:expression(this.onfocus = function(){this.style.backgroundColor='#E5F0FF';})}
</style>
<button>New</button>//



122.判断是左键还是右键被按下
<body onmousedown=if(event.button==1)alert("左键");if(event.button==2)alert("右键")>//


123.获得操作系统的名称和浏览器的名称
document.write(navigator.userAgent)//



124.alt/ctrl/shift键按下
event.altKey //按下alt键

event.ctrlKey //按下ctrl键

event.shiftKey //按下shift键


 

125.将当前位置定位为C盘。
{window.location="c:"}//


126.返回输入框的类型
<script>
alert(event.srcElement.type);//

</script>

127.模拟控件的单击事件
<INPUT TYPE="hidden" name="guoguo" onclick="haha()">
<SCRIPT LANGUAGE="JavaScript">
<!--

function haha()
{
 alert();
}
guoguo.click();
//-->

</SCRIPT>//



128.取出记录集的列名
java.sql.ResultSet rset = com.bsitc.util.DBAssist.getIT().executeQuery(queryStatement, conn);
java.sql.ResultSetMetaData metaData = rset.getMetaData();
int count = metaData.getColumnCount();
String name = metaData.getColumnName(i);
String value = rset.getString(i);//


129.格式化数字
function format_number(str,digit)
{
 if(isNaN(str))
 {
  alert("您传入的值不是数字!");
  return 0;
 }
 else if(Math.round(digit)!=digit)
 {
  alert("您输入的小数位数不是整数!");
  return 0;
 }
 else
  return Math.round(parseFloat(str)*Math.pow(10,digit))/Math.pow(10,digit);
}

130.回车按钮转化为tab按钮
if(event.keyCode==13) event.keyCode=9; //将



131.滚动条滚动
<button onclick="text1.scrollTop=text1.scrollHeight">Scroll</button><br>
<textarea id="text1" cols=50 rows=10>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
</textarea>//



132.判断是什么对象
if(typeof(unknown)=="function")return true;
if(typeof(unknown)!="object")return false;//



133.取消文本框自动完成功能
<input type="text" autocomplete="off"> //


134.让下拉框自动下拉
<select onmouseover="javascript:this.size=this.length" onmouseout="javascript:this.size=1">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select> //



135.读取XML文件
var childrenobj=myselect//document.all.myselect;

    var oXMLDoc = new ActiveXObject('MSXML');
    oXMLDoc.url = "mymsg.xml";
    var oRoot=oXMLDoc.root;
    if(oRoot.children != null)
 {
        for(var i=0;i<oRoot.children.item(0).children.length;++i)
  {
            oItem = oRoot.children.item(0).children.item(i);
            oOption = new Option(oItem.text,oItem.value);
   childrenobj.add(oOption);
        }
    }</s

分享到:
评论

相关推荐

    JAVASCRIPT精彩200例

    下面将对其中的一些示例进行详细解析,提炼出相关的JavaScript知识点。 ### 知识点1:事件处理 在示例1中,`onBlur`, `onFocus`, `onChange`, 和 `onSelect` 是常见的HTML事件处理器。这些事件分别在元素失去焦点...

    JavaScript精彩300例技巧集

    《JavaScript精彩300例技巧集》是一份深入实践、极具价值的学习资源,它通过丰富的实例和详尽的解释,帮助开发者掌握JavaScript的核心技巧。这个资料包中的每一个例子都是一次学习和提升的机会,旨在让读者能够从...

    JavaScript 精彩300例技巧集 chm

    "JavaScript精彩300例技巧集"是一份珍贵的学习资源,它包含了丰富的实例,涵盖了JavaScript在实际开发中的多种应用领域。这个chm格式的文档集合了游戏开发、日期与时间处理、文本特效、按钮样式、鼠标交互等多种实用...

    JavaScript精彩网页设计300例技巧集

    JavaScript精彩网页设计300例技巧集是一本深入探讨JavaScript在网页设计中应用的资源集合。这本书或课程可能包含了从基础到高级的各种示例和技巧,旨在帮助开发者提升其JavaScript技能,进而创建出更具交互性和动态...

    vb精彩编程200例

    《VB精彩编程200例》是一本涵盖了多个IT领域实践的编程教程,主要针对Visual Basic(VB)语言,旨在通过丰富的实例帮助读者深入理解和掌握VB编程技术。书中的实例覆盖了窗体与界面设计、多媒体处理、数据库操作、...

    javascript精彩技巧集300例下载

    "JavaScript精彩技巧集300例下载" 提供了一个丰富的学习资源,帮助开发者深入理解和掌握JavaScript的各种技巧。以下是对这些技巧的一些详细解释: 1. **DOM操作**:JavaScript通过Document Object Model(DOM)来...

    js技巧200例

    这里我们探讨一下给定文件中的200个JS技巧实例。 1. **文本框焦点问题**:通过`onFocus`和`onBlur`事件处理函数,可以控制文本框在获得和失去焦点时的行为。例如,当用户点击文本框,如果其默认值是“郭强”,则会...

    Dreamweaver 8网页设计精彩150例

    《Dreamweaver 8网页设计精彩150例》是一本深入浅出的教程,旨在帮助初学者和有一定基础的用户提升在网页设计领域的技能。Dreamweaver是Adobe公司开发的一款强大的网页设计与开发工具,它集成了直观的可视化界面和...

    《ASP.NET精彩编程百例》电子书

    《ASP.NET精彩编程百例》是一本专门为ASP.NET初学者和进阶者设计的实践教程。这本书通过详尽解析100个精心挑选的实例,深入浅出地介绍了ASP.NET平台的各种开发技巧和最佳实践。ASP.NET是微软公司推出的Web应用程序...

    C++到VC++精彩100例

    【标题】"C++到VC++精彩100例"是一个编程教程,旨在通过一系列精心挑选的实例,帮助读者从基础的C++语言过渡到使用Microsoft的Visual C++(简称VC++)开发环境进行实际项目开发。这个教程可能涵盖了C++语言的核心...

    js精彩300例技巧集

    "js精彩300例技巧集"是一个汇集了三百个JavaScript实用示例的资源集合,旨在帮助开发者提升技能,快速理解和应用JavaScript的核心概念。 1. **基础语法** - 变量声明:JavaScript支持var、let和const进行变量声明...

    ASP.NET编程精彩百例

    "ASP.NET编程精彩百例"是一部深入探讨这一技术的教程,旨在通过一系列实用的例子帮助读者掌握ASP.NET编程的核心技巧。 在ASP.NET编程中,开发者可以使用多种语言,如C#或VB.NET,来编写服务器端代码。这些代码与...

    巧学巧用Dreamweaver制作网页精彩50例.rar

    《巧学巧用Dreamweaver制作网页精彩50例》是一本专为初学者和有一定基础的网页设计者编写的实战教程。通过50个精心挑选的实例,本书旨在帮助读者掌握使用Adobe Dreamweaver这一强大工具进行网页设计与开发的技巧。...

    ASP.NET编程精彩百例(精彩、很有意思)

    这个“ASP.NET编程精彩百例”显然是一个汇集了多个实例的教程或者资源集合,旨在帮助学习者通过实际操作来掌握ASP.NET的核心技术和应用场景。 1. **基础概念**: - ASP.NET:它是.NET Framework的一部分,提供了一...

    Java_javascript网页设计活学活用300问

     Javascript 精彩300例技巧集,chm格式,都是些很实用的JS实例,包括游戏、日期特效、文本特效、按钮、鼠标特效等,还有一部分Java Applet等。   资源截图: 资源太大,传百度网盘了,链接...

    php编程基础精彩实例

    "php编程基础精彩实例"这个压缩包文件包含了多个小示例项目,旨在帮助新手快速掌握PHP的核心概念和常见应用。通过这些实例,我们可以深入理解PHP语言的语法、函数、流程控制以及与其他Web技术(如HTML、CSS和...

    Dreamweaver MX中文版精彩设计百例

    《Dreamweaver MX中文版精彩设计百例》是一本针对Adobe Dreamweaver MX中文版的实战教程,旨在帮助用户深入理解和掌握这款强大的网页设计与开发工具。Dreamweaver MX是Web开发领域的重要软件,它提供了丰富的功能,...

    巧学巧用Dreamweaver制作网页精彩50例

    《巧学巧用Dreamweaver制作网页精彩50例》这本书是针对初学者和有一定基础的网页设计者编写的,旨在通过丰富的实例帮助读者深入理解并掌握使用Dreamweaver进行网页设计的技巧。Dreamweaver是一款由Adobe公司开发的...

    PHP经典编程100例(压缩包)

    "PHP经典编程100例"这个压缩包提供了一系列适合初学者的PHP小程序,旨在帮助初学者深入理解PHP的语法、编程技巧以及解决问题的方法。以下是这些实例可能涵盖的一些核心知识点: 1. **PHP基础知识**:每个例子都可能...

    asp.net编程精彩百例(part 2)

    本资源"asp.net编程精彩百例(part 2)"是该主题的第二部分,包含了多个ASP.NET编程的实际案例,旨在帮助开发者深入理解和掌握ASP.NET的核心概念和实用技巧。 在ASP.NET中,C#是一种主要的编程语言,它具有现代、类型...

Global site tag (gtag.js) - Google Analytics