一,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( " 你好 " );
}
else if  (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;  // 将第一个字加到最后
}
else if  (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>

javascript经典案例相关推荐

  1. JavaScript经典案例:用户协议确认

    效果展示: CSS代码: <style type="text/css">#wrapper {width: 80%;height: 500px;margin: 50px ...

  2. JavaScript经典案例:添加/删除元素类名

    效果展示: CSS代码: <style type="text/css">#btn-wrapper {width: 300px;height: 100px;text-al ...

  3. JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】

    Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...

  4. JavaScript键盘事件经典案例

    JavaScript键盘事件五大经典案例 目录: JavaScript键盘事件五大经典案例 1.什么是键盘事件 2.常用键盘事件 3.常用属性和方法 4.案例 4.1 京东搜索框 4.2 快递单号输入 ...

  5. JavaScript 函数(含经典案例:反转数组、求所有参数最大值、判断闰年、获取指定年份的2月份的天数)

    JavaScript 函数 一. 函数的使用 1. 声明函数: 2. 调用函数 二. 函数的参数 1. 形参和实参的定义 2. 形参和实参的使用 3. 函数形参和实参个数不匹配问题 4. 函数的返回值 ...

  6. 韩顺平 javascript教学视频_学习笔记20_多态经典案例_补讲闭包细节

    多态经典案例 经典案例,看代码: <html> <head> <script language="javascript"> function M ...

  7. JavaScript基础语法笔记,ECMAScript基础,每部分都有经典案例以及解析。会持续更新(2022.0310)

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.JavaScript导读 1.1 什么是JavaScript(这里借鉴Js红宝书的内容,看一看就可以了) 1.2 ...

  8. jQuery选择器经典案例

    jQuery选择器经典案例 具体讲解内容参照上一篇: 选择器详细讲解 基本选择器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&qu ...

  9. 《Vue入门到精通》最强Vue教程,附带经典案例,万字详解,干货十足!

    目录: 一.前言 二.Vue是什么? 1.简介 2.发展史 3.为什么要学习Vue? 4.jQuery.javascript.Vue的区别 5.Vue框架构造 三.Vue的使用 1.Vue环境搭建 2 ...

最新文章

  1. python中if else语句用法_讲解Python中if语句的嵌套用法
  2. python解析任意json
  3. 【下载】《看见新力量》第二期,带你走进数十位科技创业者背后的故事
  4. vb与三菱plc以太网通讯_实战演练|三菱触摸屏GOT2000与三菱Q系列以太网通讯
  5. 美团AI全景图:吃喝玩乐背后的黑科技
  6. MySQL笔记-utf8和utfmb4
  7. `if __name__ == __main__`模块运行代码管理
  8. php 获取图片的宽高,JS怎么获取图片当前宽高
  9. 实战Citrix XenDesktop 5.5部署
  10. LeetCode 刷题笔记 2. 有效的括号(Valid Parentheses)
  11. php使用curl函数采集,PHP采集相关教程之一:CURL函数库
  12. linux sfc模拟器,PSP适用SFC模拟器Snes9x完全使用教程
  13. 服务器无线组网,物联网无线组网介绍
  14. 网络架构采用 bs/cs 混搭模式_最高处|SM一姐出道20年充满偶像气质天生音乐才能还有最高级的混搭_休闲...
  15. KCL v0.4.4 发布 - 自定义 YAML Manifests 输出以及 Python SDK
  16. 全球认可的PMI认证体系
  17. keepalive+nginx搭建主从负载服务器
  18. 看漫画学python 怎么样_看着漫画学Python是种怎样的体验?
  19. sqlserver故障转移集群和alwayson的区别_详解SQL Server 2016 + AlwaysOn 无域集群
  20. Lambda 表达式的常用操作示例

热门文章

  1. Ubuntu查看网卡信息
  2. JavaScript 动画库
  3. OpenCL编程指南-4.1OpenCL C编程
  4. LeetCode141:判断链表是否有环
  5. 通俗易懂讲解树形DP
  6. 小马哥--高仿红米note T208联通版移植测试完美版4g 刷机包 开机界面面观
  7. 一些熟悉而又值得较真的函数
  8. 正点原子USMART使用
  9. percona mysql 安装_Percona 5.7安装
  10. Android ADB 请问怎么操作手机剪贴板,如何读取和写入剪贴板内容?