JS数组实现点击下一张

 更新时间:2016年9月20日 19:02  点击:1278

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="imagetoolbar" content="no">
<title>js数组实现</title>
<style>
<!--
body{text-align:center;}
table{
 border:0px;
}
.sp{
 width:520px;
 height:400px;
 border:2px solid #FFCC00;
 text-align:center;
 line-height:400px;
}
.sn{
 width:520px;
 height:30px;
 text-align:center;
 line-height:30px;
}
img{
 border:0px; 
 cursor:pointer;
}
-->
</style>
<script language="javascript">
<!--
var photo=new Array(4);
var photoname=new Array(4);


photo[0]="photo/1.jpg"
photoname[0]="柳梦璃"

photo[1]="photo/2.jpg"
photoname[1]="韩菱纱"

photo[2]="photo/3.jpg"
photoname[2]="云天河"

photo[3]="photo/4.jpg"
photoname[3]="慕容紫英"


currid=0

function showphoto(){
currid=currid+1;
if(currid>=4){
currid=0;
}
inphoto.src=photo[currid];
fn.innerHTML=photoname[currid];
}
-->
</script>

</head>
<body>

<table>
 <tr>
  <td class="sp"><img name="inphoto" src="photo/1.jpg" onclick="showphoto()" alt="点击图片显示下一张"></td>
 </tr>
 <tr>
  <td class="sn"><span id="fn">柳梦璃</span></td>
 </tr>
 <tr>
  <td class="sn">JS数组实现点击图片显示下一张</td>
 </tr>
</table>

</body>

</html>

<div id="d1"></div>
<script >
function createButton(){
         var obj = document.createElement("button");
          obj.innerHTML="点我!";
          obj.onclick=function(){
                      //处理click事件
            }
          obj.onmouseover=function(){
                   //处理mouseover事件
         }
        return obj;//这里由于需要返回创建的对象,所以不能把obj直接设为null. return 后obj是局部变量,不能在外部断开其与HTMLElement的引用.ie中将出现问题泄漏问题
}
var 按钮 = document.getElementsById("d1").appendChild( createButton());
按钮.做某些事();
按钮.做某些事();
........
某些东西.某些事(按钮);
......
</script>


这种写法在IE中100%内存泄漏

使用try finally很容易解决些问题
function createButton(){
         var obj = document.createElement("button");
          obj.innerHTML="点我!";
          obj.onclick=function(){
                      //处理click事件
            }
          obj.onmouseover=function(){
                   //处理mouseover事件
         }
        try{
            return obj;
        }finally{
              obj = null;//这句话在return 之后才执行 , 的效的解决了需在return后将obj置null的问题
       }
}


一个函数或方法中,其实有很多地方都需要这种选返回值,最后执行某些事的


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="imagetoolbar" content="no">
<title>翻页原理实现</title>
<style>
<!--
body{text-align:center;}
table{
 border:0px;
}
.sp{
 width:520px;
 height:400px;
 border:2px solid #FFCC00;
 text-align:center;
 line-height:400px;
}
.sn{
 width:520px;
 height:30px;
 text-align:center;
 line-height:30px;
}
img{
 border:0px; 
}
-->
</style>

</head>
<body>

<table>
 <tr>
  <td class="sp"><a href="2.asp?page=4"><img name="inphoto" src="photo/3.jpg" alt="点击图片显示下一张"></a></td>
 </tr>
 <tr>
  <td class="sn"><span id="fn">云天河</span></td>
 </tr>
 <tr>
  <td class="sn">利用翻页原理实现点击图片显示下一张</td>
 </tr>
</table>

</body>

</html>


大家可以发现很多网站都把验证码改成在点击输入框时才显示的。包括,qzone,baidu,discuz等。

我来说下这样做有以下两点好处。

1.减轻服务器负载
比如说回复需要输入验证码,而实际上我们知道会回复的比率很底,假如帖子打开1000次只有10个人回复了,那么990次加载验证码负载都是浪费掉的

2.验证码实时正确性

比如我们同时打开两个帖子,验证码使用的是同一个cookie/session变量,当打开第一个页面时假如验证码为1111,第二次条开时为2222,实际上第二次的验证码已经把第一次的覆盖了,这时两个验证码实际上都是2222,这种情况就会造成输入正确的验证码实际上也是错的。

验证码改成在点击输入框时才显示后,验证码就是实时的了。

dl,dt,dd作用与用法

我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签,很少用刑<dl>标签,但是这个三个标签却有着不可忽视的作用,毕竟Web标准中要尽最大可能的使用已有的标签。它们的用途是:

< dl>< /dl>用来创建一个普通的列表,

 

< dt>< /dt>用来创建列表中的上层项目,

< dd>< /dd>用来创建列表中最下层项目,

< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

有如下代码


<html>
<head>
<title>一个普通列表</title>
</head>
<body text="blue">
<dl>
  <dt>bbbbb</dt>
    <dd>北c </dd>
    <dd>上c </dd>
    <dd>广c </dd>
  <dt>mmmmm</dt>
    <dd>s顿 </dd>
    <dd>s加哥 </dd>
    <dd>s约 </dd>
</dl>
</body>
</html>

我们可以看到,<dt></dt>中间的文字即时我们没有进行缩进它也会怎地向前靠拢,而<dd></dd>中间的内容则自动向后缩进。这在腾讯新闻评论中已经使用到了

[!--infotagslink--]

相关文章

  • php中eval()函数操作数组的方法

    在php中eval是一个函数并且不能直接禁用了,但eval函数又相当的危险了经常会出现一些问题了,今天我们就一起来看看eval函数对数组的操作 例子, <?php $data="array...2016-11-25
  • Python 图片转数组,二进制互转操作

    这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
  • php数组操作 键名比较 差集 交集赋值

    本文章提供在量的数据中级操作实例有如对键名比较计算数组的差集 计算差集 给指定数组中插入一个元素 反转数组 交集赋值新的数组实例。 //定义回调函数 funct...2016-11-25
  • C#二维数组基本用法实例

    这篇文章主要介绍了C#二维数组基本用法,以实例形式分析了C#中二维数组的定义、初始化、遍历及打印等用法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • C#数组的常用操作方法小结

    Array数组在C#中同样是最基本的数据结构,下面为大家C#数组的常用操作方法小结,皆为细小的代码段,欢迎收看收藏...2020-06-25
  • php curl模拟post请求和提交多维数组的示例代码

    下面一段代码给大家介绍php curl模拟post请求的示例代码,具体代码如下: <&#63;php$uri = "http://www.cnblogs.com/test.php";//这里换成自己的服务器的地址// 参数数组$data = array ( 'name' => 'tanteng'// 'passwor...2015-11-24
  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
  • C# 拷贝数组的几种方法(总结)

    下面小编就为大家带来一篇C# 拷贝数组的几种方法(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
  • PHP 二维数组根据某个字段排序的具体实现

    本文记录的要实现的功能类似于 MySQL 中的 ORDER BY,上个项目中有遇到这样的一个需求。 要求:从两个不同的表中获取各自的4条数据,然后整合(array_merge)成一个数组,再根据数据的创建时间降序排序取前4条。 遇到这个...2014-06-07
  • C#实现字符串转换成字节数组的简单实现方法

    这篇文章主要介绍了C#实现字符串转换成字节数组的简单实现方法,仅一行代码即可搞定,非常简单实用,需要的朋友可以参考下...2020-06-25
  • c#将字节数组转成易读的字符串的实现

    这篇文章主要介绍了c#将字节数组转成易读的字符串的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
  • C#读取文件所有行到数组的方法

    这篇文章主要介绍了C#读取文件所有行到数组的方法,涉及C#针对文件及数组的相关操作技巧,需要的朋友可以参考下...2020-06-25
  • 将二维数组转为一维数组的2种方法

    如何将下面的二维数组转为一维数组。复制代码 代码如下:$msg = array(  array(    'id'=>'45',    'name'=>'jack'  ),  array(    'id'=>'34',    'name'=>'mary'  ),  array(    'id...2014-05-31
  • php中数组写入文件方法

    在php中为我们提供了一个函数var_export 他可以直接将php代码入到一个文件中哦。 代码如下 复制代码 var_export($times,true);后面不加tru...2016-11-25
  • PHP 如何获取二维数组中某个key的集合

    本文为代码分享,也是在工作中看到一些“大牛”的代码,做做分享。 具体是这样的,如下一个二维数组,是从库中读取出来的。 代码清单: 复制代码 代码如下: $user = array( 0 => array( 'id' => 1, 'name' => '张三', 'ema...2014-06-07
  • js有序数组的连接问题

    1.前言 昨天碰到一道关于如何解决有序数组的连接问题,这是一个很常见的问题。但是这里要考虑到代码的效率问题,因为要连接的数组都是有序的,这是一个非常重要的前提条件。2.简单但效率不高的算法 我首先想到的是使用...2013-10-04
  • python 实现将Numpy数组保存为图像

    今天小编就为大家分享一篇python 实现将Numpy数组保存为图像,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27
  • C#中数组、ArrayList、List、Dictionary的用法与区别浅析(存取数据)

    在工作中经常遇到C#数组、ArrayList、List、Dictionary存取数据,但是该选择哪种类型进行存储数据呢?很迷茫,今天小编抽空给大家整理下这方面的内容,需要的朋友参考下吧...2020-06-25
  • C#中List和数组之间转换的方法

    这篇文章主要介绍了C#中List和数组之间转换的方法,涉及比较简单的转换技巧,需要的朋友可以参考下...2020-06-25
  • javascript中去除数组重复元素的实现方法【实例】

    下面小编就为大家带来一篇javascript中去除数组重复元素的实现方法【实例】。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧...2016-04-16