js基础的实例
2014-11-25 16:41
148 查看
一，javascript动态显示：
如显示效果上图所示：
如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细：代码如下：
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a");//获取标签为a的内容
for (var i =0;
i < links.length; i++) { //逐行遍历
var link = links[i];
link.onmouseover = onmouse; //当鼠标经过某行是调用onmouse函数
}
}
function onmouse() {
var div = document.createElement("div"); //动态创建div标签
div.style.position ="absolute"; //设置标签属性为手型
div.style.top = window.event.clientY; //设置y坐标
div.style.left = window.event.clientX; //设置x坐标
div.innerHTML ="saefagfawefaw<font color='red'>后卫噢服务和偶if</font>";//将要显示的内容添加到后面
document.body.appendChild(div); //将动态的div跟在body后面
}
</script>
</head>
<body onload="initEvent
()">
<a href="http://www.baidu.com" title="aesfwaef;ah">百度</a><br />
<br />
<a href="http://www.baidu.com" title="afwaajmalkm">新浪</a><br />
<br />
<a href="http://www.baidu.com" title="afwaajmalkm">谷歌</a><br />
<br />
<a href="http://www.baidu.com" title="afwaajmalkm">哈哈</a><br />
<br />
</body>
二：点击右键显示“你好”，点击左键显示禁止复制
<head>
<title></title>
<script type="text/javascript">
function MyClick() {
if (event.button ==1)
{
alert("你好");
}
elseif (event.button ==2)
{
alert("禁止复制");
}
else {
setTimeout("close();", 2000);
}
}
function close() {
window.opener =null;
window.close();
}
</script>
</head>
<body onmouseup="MyClick()">
<br />
</body>
三：动态走马灯显示
显示效果如图所示：
当点向左滚动式title字样向左，点击享有滚动按钮时title字样想又滚动
<head>
<title>新学期开学课！</title>
<script type="text/javascript">
var dir ="left"; //默认初始为向左
function huigun() {
if (dir =="left")
{ //当dir为left是向左滚动
var title = document.title; //取到title的值
var first = title.charAt(0); //取出第一个字
var last = title.substring(1,
title.length); //取出第二到最后的所有字
document.title = last + first; //将第一个字加到最后
}
elseif (dir =="right")
{ //如果向右滚，则同理
var title = document.title;
var first = title.substring(0,
title.length -1)
var last = title.charAt(title.length -1);
document.title = last + first;
}
else {
alert("方向错了");
}
}
function setdir(d) { //当鼠标点击按钮式同时给dir复制
dir = d;
}
setInterval("huigun()",500); //每隔0.5秒刷新一次
</script>
</head>
<body>
<input type="button" value="向左滚动" onclick="setdir('left');"/>
<input type="button" value="向右滚动" onclick="setdir('right');"/>
</body>
四：禁止复制小结
显示效果如图所示，将第一个手机号码复制粘贴到重复手机号码框时禁止复制
<input type="button" value="粘贴" onclick="clipboardData.setData('Text','我发现了个好网站，很黄很暴力'+location.href);alert('已经将信息复制到粘贴版中，请快速复制给好友');"/>
这是一篇文章
手机号码<input type="text"/>
重复手机号码<input type="text" onpaste="alert('为保证您的信息安全，请勿粘贴！');return
false"/>
五：javascript遍历输出
示例代码：
<head>
<title></title>
<script type="text/javascript">
function as() {
var radios = document.getElementsByName("gander"); //遍历name为gander的值然后输出
for (var radio =0;
radio < radios.length; radio++) {
var i = radios[radio];
alert(i.value);
}
}
</script>
</head>
<body>
<input type="radio" name="gander" value="男"/>
男
<input type="radio" name="gander" value="保密"/>
保密
<input type="radio" name="gander" value="女"/>
女
<input type="button" value="选择" onclick="as()"/>
</body>
六：哈哈呜呜交叉变化
显示效果如图：
点击某个按钮时当前点击的按钮显示呜呜，其他按钮显示哈哈
示例代码：
<head>
<title></title>
<script type="text/javascript">
function btn() {
var inputs = document.getElementsByTagName("input"); //取出名字为input的值
for (var i =0;
i < inputs.length; i++) { //遍历
var input = inputs[i];
input.onclick = btnclick; //当某个按钮被点击时调用btnclick函数
}
}
function btnclick() {
var inputs = document.getElementsByTagName("input"); //取出input的值
for (var i =0;
i < inputs.length; i++) {
var input = inputs[i]; //遍历
if (input == window.event.srcElement) { //如果被点击
input.value ="呜呜"; //将值改为呜呜
}
else {
input.value ="哈哈"; //每点击的为哈哈
}
}
}
</script>
</head>
<body onload="btn()">
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
</body>
七：协议倒计时（开始打开页面时倒计时10秒阅读时间，当十秒到后注册按钮可用）
示例效果如图：
示例代码：
<head>
<title></title>
<script type="text/javascript">
var leftSecond =10; //设定初始值
var inervalId;
function CountDown() {
var reg = document.getElementById("btnReg"); //取出id为btnreg的值
if (reg) {
if (leftSecond <=0)
{ //如果值小于等于0则按钮可用
reg.disabled ="";
// clearInterval(inervalId);
}
else { //如果值大于0
reg.value ="请仔细阅读，还剩"+ leftSecond +"秒"//将按钮的值改为…+设定值
leftSecond--; //设定值减1
}
}
}
inervalId = setInterval("CountDown()",1000); //每隔1秒刷新
</script>
</head>
<body>
<textarea></textarea>
<input id="btnReg" type="button" value ="注册" disabled="disabled"/> //按钮初始不可用
</body>
八：图片随鼠标移动
当鼠标移动到哪里，图片也移动到哪里
当鼠标位置发生变化时如图所示图片跟随鼠标一起变化位置，并且显示文字:哈哈！我会飞！
效果显示如图：
示例代码：
<head>
<title></title>
<script type="text/javascript">
document.onmousemove =function() { //当鼠标移动式获取当前x，y坐标值
var x = window.event.clientX;
var y = window.event.clientY;
var f = document.getElementById("fly"); //取到id为fly的标签内容赋值于f
if (!f) { //如果没有取到，则返回
return;
}
f.style.left = x; //否则将f的坐标设为鼠标坐标值x，y
f.style.top = y;
}
</script>
</head>
<body>
<div id="fly" style="position:
absolute">
<img src="300png016.png"/><br />
哈哈！我会飞！
</div>
</body>
九，动态添加
<head>
<title></title>
<script type="text/javascript">
function on() { //点击按钮，添加百度
var links = document.createElement("<a
href='http://www.baidu.com'>百度</a>");
links.innerHTML="百度"; //向连接中添加显示
document.body.appendChild(links); //将创建的连接追加到body中
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="on()"/>
</body>
十：动态高亮
鼠标移动上的当前行显示为红色，其余行显示为白色
<head>
<title></title>
<script type="text/javascript">
function initEven() {
var footballs = document.getElementById("football"); //取id费football的标签
var lis = footballs.getElementsByTagName("li"); //取name为li
的标签
for (var i =0;
i < lis.length; i++) { //遍历
var li = lis[i];
li.onmouseover =function() { //当鼠标移动到某个li上时执行
var footballs = document.getElementById("football");
var lis = footballs.getElementsByTagName("li");
for (var i =0;
i < lis.length; i++) { //遍历
var li = lis[i];
if (li ==this)
{
li.style.background ="red"; //将当前的背景设为红色
li.onclick =function() { //当点击是将字体设为30号
this.style.fontSize =30;
}
}
else {
li.style.background ="white"; //将其余的背景设为白色
li.style.fontSize =18; //将其余的字体设为18号
}
}
}
li.onclick =function() {
this.style.fontSize =30;
}
}
}
</script>
</head>
<body onload="initEven()">
<ul id="football">
<li>曼联</li>
<li>中国</li>
<li>美国</li>
<li>阿根廷</li>
<li>西班牙</li>
</ul>
</body>
十一：动态放大
<body>
<div id="div1" style="width:10px;height:100px;border-style:solid;border:Red;border-width:1px;">
军事观察室_百度视频
</div>
<input type="button" value="放大" onclick="var
div1=document.getElementById('div1');div1.style.width='200px';div1.style.height='200px';"/>
</body>
十二：动态无刷新显示详细内容
当勾选是现实详细内容“这是高级选项”当勾选取消时详细内容消逝
效果如图：
示例代码：
<head>
<title></title>
<script type="text/javascript">
function show(cb) {
var div = document.getElementById("Div");
if (cb.checked) {
div.style.display =""; //当勾选是现实为可见
}
else {
div.style.display ="none";
}
}
</script>
</head>
<body>
<input type="checkbox" id="cbshow" onclick="show(this)"/><label
for="cbshow">显示高级选项</label>
<div id="Div" style="display:none">这是高级选项</div> //将初始设为不可见
</body>
例二<body>
<a href="http://www.baidu.com" onmouseout="document.getElementById('baiduDiv').style.display='none'"onmouseover="document.getElementById('baiduDiv').style.display=''">百度网</a>
<div id="baiduDiv" style="display:none;
border-color:Green; border-style:dotted; border-width:1px">
百度网是<font color="red">李彦宏</font>创建的，网址是：<a
href="http://www.baidu.com">www.baidu.com</a></div>
</body>
十三：点击超链接变色但不打开连接
效果如图
当点击超链接时，不打开连接，只是将其背景颜色显示为红色
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a"); //获取标签
for (var i =0;
i < links.length; i++) { //遍历
var link = links[i];
link.onclick = onclick; //如果连接点击则触发事件！注javascript事件没有括号
}
}
function onclick() {
var links = document.getElementsByTagName("a");
for (var i =0;
i < links.length; i++) {
var link = links[i];
if (link ==this)
{
link.style.background ="red";
}
else {
link.style.background ="white";
}
}
window.event.returnValue =false; //禁止网页打开超链接
}
</script>
</head>
<body onload="initEvent()">
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.baidu.com">新浪</a><br />
<a href="http://www.baidu.com">新华</a><br />
<a href="http://www.baidu.com">谷歌</a><br />
<a href="http://www.baidu.com">优酷</a><br />
</body>
十四：隔行变色
<head>
<title></title>
<script type="text/javascript">
function shoutIt() {
var table = document.getElementById("tb");
var tr = table.getElementsByTagName("tr");
for (var i =0;
i < tr.length; i++) {
if (i %2==0)
{
var trs = tr[i];
trs.style.background ="red";
}
}
}
</script>
</head>
<table id="tb">
<tr><td> 哈哈</td><td>23</td></tr><tr><td>窝窝</td><td>253</td></tr>
<tr><td>嘿嘿</td><td>45</td></tr><tr><td>呵呵</td><td>123</td></tr>
</table>
</body>
十五：获取焦点
效果如图
当鼠标点击文本框式变为红丝，当点击另外一个是之前那个变为绿色，点击哈哈按钮式红色变为绿色
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i =0;
i < inputs.length; i++) {
var input = inputs[i];
if (input.type =="text")
{
input.onfocus = inputonfocus; //当获得焦点时触发（onfocus为获得焦点）
input.onblur = inputonblurs; //当失去焦点是触发（onblur为失去焦点）
}
}
}
function inputonfocus() {
this.style.background ="red";
}
function inputonblurs() {
this.style.background ="Green";
}
</script>
</head>
<body onload="initEvent()">
<input type="text"/><input
type="text" /><input type="text"/><input
type="text" /><input
type="text"/><input
type="text" /><input type="text"/><input
type="text" /><input
type="text"/><input
type="text" /><input type="button" value="哈哈"/><input
type="text" /><input
type="text"/><input
type="text" /><input type="text"/>
</body>
十六：点击弹出登录窗口
效果如图：当点击登陆按钮时动态弹出登陆窗口，点击关闭按钮式关闭：
示例代码：
<head>
<title></title>
<script type="text/javascript">
function showLogin() {
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display ='';
}
function hideLogin() {
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display ='none';
}
</script>
</head>
<body>
<a href="javascript:showLogin()">登录</a>
<div style="position:
absolute; top: 200px; left: 200px; border-style: solid; border-color: Blue;
border-width: thin;display:none;" id="loginDiv">
<img src="images/close.JPG" onclick="hideLogin()" style="float:
right"/>
<table>
<tr>
<td>
<label for="username">
用户名：</label>
</td>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr>
<td>
<label for="password">
密码：</label>
</td>
<td>
<input type="password" id="passwordpassword"/>
</td>
</tr>
</table>
</div>
</body>
十七：搜索框效果
效果显示如图
示例代码：
<head>
<title></title>
<script type="text/javascript">
function inputBlur(keyword) {
if (keyword.value.length <=0)
{
keyword.value ="输入搜索关键词";
keyword.style.color ="Gray";
}
}
function inputFocus(keyword) {
if (keyword.value =='输入搜索关键词')
{
keyword.value ='';
keyword.style.color ='Black';
}
}
</script>
</head>
<body>
<input onblur="inputBlur(this)" onfocus="inputFocus(this)" id="keyword" value="输入搜索关键词" style="color:Gray"/><input
type="button" value="搜索一下"/><input id="Text1"/><input
id="Text2" />
</body>
十八：评分五角星随鼠标移动显示（当鼠标放在五角星上时前面的显示为黑色五角星，后面的显示白色五角星）
如图显示
当鼠标放到哪个星星上时，之前的星星显示黑色星，之后的显示黑色星
<head>
<title></title>
<script type="text/javascript">
function indexOf(arr, element) { //传入array数组和当前值
for (var i =0;
i < arr.length; i++) {
if (arr[i] == element) { //第i个值等于当前值
return i; //返回i
}
}
return-1;
}
function initEvent() {
var rating = document.getElementById("rating"); //取id为rating的标签
var tds = rating.getElementsByTagName("td"); //在id为rating标签下去名字为td的值
for (var i =0;
i < tds.length; i++) { //遍历
var td = tds[i];
td.style.cursor ='pointer'; //设置鼠标显示形式
td.onmouseover =function() { //当鼠标移动时…
…
var rating = document.getElementById("rating"); //不用担心和initEvent中的rating、tds变量冲突，因为他们是两个函数，只是写在了一起而已。
var tds = rating.getElementsByTagName("td");
var index = indexOf(tds, this); //调用函数indexof计算鼠标当前为值
for (var i =0;
i <= index; i++) { //遍历鼠标之前的值
tds[i].innerText ='★'; //将其赋值为“★”
}
for (var i = index+1;
i <tds.length; i++) { //遍历鼠标之后的值
tds[i].innerText ='☆'; //将其赋值为“☆“
}
};
}
}
</script>
</head>
<body onload="initEvent()">
<table id="rating"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>
</body>
二十：无刷新评论
如图显示
示例代码
<head>
<title></title>
<script type="text/javascript">
function pl() {
var nickname = document.getElementById("nickname").value;
var input = document.getElementById("comm").value;
var table = document.getElementById("table"); //创建表格
var tr = document.createElement("tr"); //创建新行
var Nickname = document.createElement("td"); //创建昵称单元格
Nickname.innerText = nickname;
tr.appendChild(Nickname); //添加到新行
var Comm = document.createElement("td"); //创建评论单元格
Comm.innerText = input;
tr.appendChild(Comm); //添加到新行
table.tBodies[0].appendChild(tr); //将新行添加到表格中的tbody中，tBodies：一个表格允许有多个tbody。
}
</script>
</head>
<body>
<table id="table">
<tbody>
</tbody>
</table>
昵称：<input id="nickname" type="text"/><br />
<textarea id="comm"></textarea>
<input id="input" type="button" value="评论" onclick="pl()"/>
</body>
如显示效果上图所示：
如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细：代码如下：
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a");//获取标签为a的内容
for (var i =0;
i < links.length; i++) { //逐行遍历
var link = links[i];
link.onmouseover = onmouse; //当鼠标经过某行是调用onmouse函数
}
}
function onmouse() {
var div = document.createElement("div"); //动态创建div标签
div.style.position ="absolute"; //设置标签属性为手型
div.style.top = window.event.clientY; //设置y坐标
div.style.left = window.event.clientX; //设置x坐标
div.innerHTML ="saefagfawefaw<font color='red'>后卫噢服务和偶if</font>";//将要显示的内容添加到后面
document.body.appendChild(div); //将动态的div跟在body后面
}
</script>
</head>
<body onload="initEvent
()">
<a href="http://www.baidu.com" title="aesfwaef;ah">百度</a><br />
<br />
<a href="http://www.baidu.com" title="afwaajmalkm">新浪</a><br />
<br />
<a href="http://www.baidu.com" title="afwaajmalkm">谷歌</a><br />
<br />
<a href="http://www.baidu.com" title="afwaajmalkm">哈哈</a><br />
<br />
</body>
二：点击右键显示“你好”，点击左键显示禁止复制
<head>
<title></title>
<script type="text/javascript">
function MyClick() {
if (event.button ==1)
{
alert("你好");
}
elseif (event.button ==2)
{
alert("禁止复制");
}
else {
setTimeout("close();", 2000);
}
}
function close() {
window.opener =null;
window.close();
}
</script>
</head>
<body onmouseup="MyClick()">
<br />
</body>
三：动态走马灯显示
显示效果如图所示：
当点向左滚动式title字样向左，点击享有滚动按钮时title字样想又滚动
<head>
<title>新学期开学课！</title>
<script type="text/javascript">
var dir ="left"; //默认初始为向左
function huigun() {
if (dir =="left")
{ //当dir为left是向左滚动
var title = document.title; //取到title的值
var first = title.charAt(0); //取出第一个字
var last = title.substring(1,
title.length); //取出第二到最后的所有字
document.title = last + first; //将第一个字加到最后
}
elseif (dir =="right")
{ //如果向右滚，则同理
var title = document.title;
var first = title.substring(0,
title.length -1)
var last = title.charAt(title.length -1);
document.title = last + first;
}
else {
alert("方向错了");
}
}
function setdir(d) { //当鼠标点击按钮式同时给dir复制
dir = d;
}
setInterval("huigun()",500); //每隔0.5秒刷新一次
</script>
</head>
<body>
<input type="button" value="向左滚动" onclick="setdir('left');"/>
<input type="button" value="向右滚动" onclick="setdir('right');"/>
</body>
四：禁止复制小结
显示效果如图所示，将第一个手机号码复制粘贴到重复手机号码框时禁止复制
<input type="button" value="粘贴" onclick="clipboardData.setData('Text','我发现了个好网站，很黄很暴力'+location.href);alert('已经将信息复制到粘贴版中，请快速复制给好友');"/>
这是一篇文章
手机号码<input type="text"/>
重复手机号码<input type="text" onpaste="alert('为保证您的信息安全，请勿粘贴！');return
false"/>
五：javascript遍历输出
示例代码：
<head>
<title></title>
<script type="text/javascript">
function as() {
var radios = document.getElementsByName("gander"); //遍历name为gander的值然后输出
for (var radio =0;
radio < radios.length; radio++) {
var i = radios[radio];
alert(i.value);
}
}
</script>
</head>
<body>
<input type="radio" name="gander" value="男"/>
男
<input type="radio" name="gander" value="保密"/>
保密
<input type="radio" name="gander" value="女"/>
女
<input type="button" value="选择" onclick="as()"/>
</body>
六：哈哈呜呜交叉变化
显示效果如图：
点击某个按钮时当前点击的按钮显示呜呜，其他按钮显示哈哈
示例代码：
<head>
<title></title>
<script type="text/javascript">
function btn() {
var inputs = document.getElementsByTagName("input"); //取出名字为input的值
for (var i =0;
i < inputs.length; i++) { //遍历
var input = inputs[i];
input.onclick = btnclick; //当某个按钮被点击时调用btnclick函数
}
}
function btnclick() {
var inputs = document.getElementsByTagName("input"); //取出input的值
for (var i =0;
i < inputs.length; i++) {
var input = inputs[i]; //遍历
if (input == window.event.srcElement) { //如果被点击
input.value ="呜呜"; //将值改为呜呜
}
else {
input.value ="哈哈"; //每点击的为哈哈
}
}
}
</script>
</head>
<body onload="btn()">
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
</body>
七：协议倒计时（开始打开页面时倒计时10秒阅读时间，当十秒到后注册按钮可用）
示例效果如图：
示例代码：
<head>
<title></title>
<script type="text/javascript">
var leftSecond =10; //设定初始值
var inervalId;
function CountDown() {
var reg = document.getElementById("btnReg"); //取出id为btnreg的值
if (reg) {
if (leftSecond <=0)
{ //如果值小于等于0则按钮可用
reg.disabled ="";
// clearInterval(inervalId);
}
else { //如果值大于0
reg.value ="请仔细阅读，还剩"+ leftSecond +"秒"//将按钮的值改为…+设定值
leftSecond--; //设定值减1
}
}
}
inervalId = setInterval("CountDown()",1000); //每隔1秒刷新
</script>
</head>
<body>
<textarea></textarea>
<input id="btnReg" type="button" value ="注册" disabled="disabled"/> //按钮初始不可用
</body>
八：图片随鼠标移动
当鼠标移动到哪里，图片也移动到哪里
当鼠标位置发生变化时如图所示图片跟随鼠标一起变化位置，并且显示文字:哈哈！我会飞！
效果显示如图：
示例代码：
<head>
<title></title>
<script type="text/javascript">
document.onmousemove =function() { //当鼠标移动式获取当前x，y坐标值
var x = window.event.clientX;
var y = window.event.clientY;
var f = document.getElementById("fly"); //取到id为fly的标签内容赋值于f
if (!f) { //如果没有取到，则返回
return;
}
f.style.left = x; //否则将f的坐标设为鼠标坐标值x，y
f.style.top = y;
}
</script>
</head>
<body>
<div id="fly" style="position:
absolute">
<img src="300png016.png"/><br />
哈哈！我会飞！
</div>
</body>
九，动态添加
<head>
<title></title>
<script type="text/javascript">
function on() { //点击按钮，添加百度
var links = document.createElement("<a
href='http://www.baidu.com'>百度</a>");
links.innerHTML="百度"; //向连接中添加显示
document.body.appendChild(links); //将创建的连接追加到body中
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="on()"/>
</body>
十：动态高亮
鼠标移动上的当前行显示为红色，其余行显示为白色
<head>
<title></title>
<script type="text/javascript">
function initEven() {
var footballs = document.getElementById("football"); //取id费football的标签
var lis = footballs.getElementsByTagName("li"); //取name为li
的标签
for (var i =0;
i < lis.length; i++) { //遍历
var li = lis[i];
li.onmouseover =function() { //当鼠标移动到某个li上时执行
var footballs = document.getElementById("football");
var lis = footballs.getElementsByTagName("li");
for (var i =0;
i < lis.length; i++) { //遍历
var li = lis[i];
if (li ==this)
{
li.style.background ="red"; //将当前的背景设为红色
li.onclick =function() { //当点击是将字体设为30号
this.style.fontSize =30;
}
}
else {
li.style.background ="white"; //将其余的背景设为白色
li.style.fontSize =18; //将其余的字体设为18号
}
}
}
li.onclick =function() {
this.style.fontSize =30;
}
}
}
</script>
</head>
<body onload="initEven()">
<ul id="football">
<li>曼联</li>
<li>中国</li>
<li>美国</li>
<li>阿根廷</li>
<li>西班牙</li>
</ul>
</body>
十一：动态放大
<body>
<div id="div1" style="width:10px;height:100px;border-style:solid;border:Red;border-width:1px;">
军事观察室_百度视频
</div>
<input type="button" value="放大" onclick="var
div1=document.getElementById('div1');div1.style.width='200px';div1.style.height='200px';"/>
</body>
十二：动态无刷新显示详细内容
当勾选是现实详细内容“这是高级选项”当勾选取消时详细内容消逝
效果如图：
示例代码：
<head>
<title></title>
<script type="text/javascript">
function show(cb) {
var div = document.getElementById("Div");
if (cb.checked) {
div.style.display =""; //当勾选是现实为可见
}
else {
div.style.display ="none";
}
}
</script>
</head>
<body>
<input type="checkbox" id="cbshow" onclick="show(this)"/><label
for="cbshow">显示高级选项</label>
<div id="Div" style="display:none">这是高级选项</div> //将初始设为不可见
</body>
例二<body>
<a href="http://www.baidu.com" onmouseout="document.getElementById('baiduDiv').style.display='none'"onmouseover="document.getElementById('baiduDiv').style.display=''">百度网</a>
<div id="baiduDiv" style="display:none;
border-color:Green; border-style:dotted; border-width:1px">
百度网是<font color="red">李彦宏</font>创建的，网址是：<a
href="http://www.baidu.com">www.baidu.com</a></div>
</body>
十三：点击超链接变色但不打开连接
效果如图
当点击超链接时，不打开连接，只是将其背景颜色显示为红色
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a"); //获取标签
for (var i =0;
i < links.length; i++) { //遍历
var link = links[i];
link.onclick = onclick; //如果连接点击则触发事件！注javascript事件没有括号
}
}
function onclick() {
var links = document.getElementsByTagName("a");
for (var i =0;
i < links.length; i++) {
var link = links[i];
if (link ==this)
{
link.style.background ="red";
}
else {
link.style.background ="white";
}
}
window.event.returnValue =false; //禁止网页打开超链接
}
</script>
</head>
<body onload="initEvent()">
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.baidu.com">新浪</a><br />
<a href="http://www.baidu.com">新华</a><br />
<a href="http://www.baidu.com">谷歌</a><br />
<a href="http://www.baidu.com">优酷</a><br />
</body>
十四：隔行变色
<head>
<title></title>
<script type="text/javascript">
function shoutIt() {
var table = document.getElementById("tb");
var tr = table.getElementsByTagName("tr");
for (var i =0;
i < tr.length; i++) {
if (i %2==0)
{
var trs = tr[i];
trs.style.background ="red";
}
}
}
</script>
</head>
<table id="tb">
<tr><td> 哈哈</td><td>23</td></tr><tr><td>窝窝</td><td>253</td></tr>
<tr><td>嘿嘿</td><td>45</td></tr><tr><td>呵呵</td><td>123</td></tr>
</table>
</body>
十五：获取焦点
效果如图
当鼠标点击文本框式变为红丝，当点击另外一个是之前那个变为绿色，点击哈哈按钮式红色变为绿色
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i =0;
i < inputs.length; i++) {
var input = inputs[i];
if (input.type =="text")
{
input.onfocus = inputonfocus; //当获得焦点时触发（onfocus为获得焦点）
input.onblur = inputonblurs; //当失去焦点是触发（onblur为失去焦点）
}
}
}
function inputonfocus() {
this.style.background ="red";
}
function inputonblurs() {
this.style.background ="Green";
}
</script>
</head>
<body onload="initEvent()">
<input type="text"/><input
type="text" /><input type="text"/><input
type="text" /><input
type="text"/><input
type="text" /><input type="text"/><input
type="text" /><input
type="text"/><input
type="text" /><input type="button" value="哈哈"/><input
type="text" /><input
type="text"/><input
type="text" /><input type="text"/>
</body>
十六：点击弹出登录窗口
效果如图：当点击登陆按钮时动态弹出登陆窗口，点击关闭按钮式关闭：
示例代码：
<head>
<title></title>
<script type="text/javascript">
function showLogin() {
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display ='';
}
function hideLogin() {
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display ='none';
}
</script>
</head>
<body>
<a href="javascript:showLogin()">登录</a>
<div style="position:
absolute; top: 200px; left: 200px; border-style: solid; border-color: Blue;
border-width: thin;display:none;" id="loginDiv">
<img src="images/close.JPG" onclick="hideLogin()" style="float:
right"/>
<table>
<tr>
<td>
<label for="username">
用户名：</label>
</td>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr>
<td>
<label for="password">
密码：</label>
</td>
<td>
<input type="password" id="passwordpassword"/>
</td>
</tr>
</table>
</div>
</body>
十七：搜索框效果
效果显示如图
示例代码：
<head>
<title></title>
<script type="text/javascript">
function inputBlur(keyword) {
if (keyword.value.length <=0)
{
keyword.value ="输入搜索关键词";
keyword.style.color ="Gray";
}
}
function inputFocus(keyword) {
if (keyword.value =='输入搜索关键词')
{
keyword.value ='';
keyword.style.color ='Black';
}
}
</script>
</head>
<body>
<input onblur="inputBlur(this)" onfocus="inputFocus(this)" id="keyword" value="输入搜索关键词" style="color:Gray"/><input
type="button" value="搜索一下"/><input id="Text1"/><input
id="Text2" />
</body>
十八：评分五角星随鼠标移动显示（当鼠标放在五角星上时前面的显示为黑色五角星，后面的显示白色五角星）
如图显示
当鼠标放到哪个星星上时，之前的星星显示黑色星，之后的显示黑色星
<head>
<title></title>
<script type="text/javascript">
function indexOf(arr, element) { //传入array数组和当前值
for (var i =0;
i < arr.length; i++) {
if (arr[i] == element) { //第i个值等于当前值
return i; //返回i
}
}
return-1;
}
function initEvent() {
var rating = document.getElementById("rating"); //取id为rating的标签
var tds = rating.getElementsByTagName("td"); //在id为rating标签下去名字为td的值
for (var i =0;
i < tds.length; i++) { //遍历
var td = tds[i];
td.style.cursor ='pointer'; //设置鼠标显示形式
td.onmouseover =function() { //当鼠标移动时…
…
var rating = document.getElementById("rating"); //不用担心和initEvent中的rating、tds变量冲突，因为他们是两个函数，只是写在了一起而已。
var tds = rating.getElementsByTagName("td");
var index = indexOf(tds, this); //调用函数indexof计算鼠标当前为值
for (var i =0;
i <= index; i++) { //遍历鼠标之前的值
tds[i].innerText ='★'; //将其赋值为“★”
}
for (var i = index+1;
i <tds.length; i++) { //遍历鼠标之后的值
tds[i].innerText ='☆'; //将其赋值为“☆“
}
};
}
}
</script>
</head>
<body onload="initEvent()">
<table id="rating"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>
</body>
二十：无刷新评论
如图显示
示例代码
<head>
<title></title>
<script type="text/javascript">
function pl() {
var nickname = document.getElementById("nickname").value;
var input = document.getElementById("comm").value;
var table = document.getElementById("table"); //创建表格
var tr = document.createElement("tr"); //创建新行
var Nickname = document.createElement("td"); //创建昵称单元格
Nickname.innerText = nickname;
tr.appendChild(Nickname); //添加到新行
var Comm = document.createElement("td"); //创建评论单元格
Comm.innerText = input;
tr.appendChild(Comm); //添加到新行
table.tBodies[0].appendChild(tr); //将新行添加到表格中的tbody中，tBodies：一个表格允许有多个tbody。
}
</script>
</head>
<body>
<table id="table">
<tbody>
</tbody>
</table>
昵称：<input id="nickname" type="text"/><br />
<textarea id="comm"></textarea>
<input id="input" type="button" value="评论" onclick="pl()"/>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Node.js基础入门实例讲解
- 【javascript基础】JS正则表达式的实例方法
- Js基础--数组应用实例（图片切换）
- vue.js,基础用法实例
- js基础自定义属性索引值之图片切换实例
- Node.js基础入门实例讲解
- JS基础学习第六天：JavaScript对象入门（构造函数和实例对象）
- js基础例子动态创建table实例
- 1-5-JS基础-数组应用及实例应用
- vue.js基础-属性与方法和实例生命周期
- Jquery基础_弹出对话框_js的onload_jq的多次加载_Js和JQ对象转换_实例(一)
- js对象基础实例分析
- js对象基础实例分析
- js基础-input对象，select对象，实例：二级联动菜单
- js基础——图片切换实例(函数传参)
- 【javascript基础】JS正则表达式的实例属性
- js基础——图片切换实例
- HTML+CSS+JS基础实例
- JS基础知识和实例：
- js基础总结和对象实例