Tagged: javascript RSS

  • admin 8:27 pm on June 14, 2007 Permalink | Reply
    Tags: javascript   

    JS定时器的用法(setInterval) 

    包括：Javascript里定时器的用法，页面可见宽度的获取，以及一些层的定位知识。

    <script LANGUAGE="JavaScript">
< !–
function rand(min,max)
{
 var i=Math.floor(Math.random()*3000);
 while(i<min||i>max) i=Math.floor(Math.random()*3000);
 return i;
}
function c()
{
 w=document.body.clientWidth-100;
 h=document.body.clientHeight-100;
 //alert(document.body.clientHeight);
 t = rand(0,h);
 l = rand(0,w);
 $('d').style.top = t;
 $('d').style.left = l;
 $('d').style.display = "block";
 //a();
}
function $(e){return document.getElementById(e);}
 
couter=0;
idle = 1; // seconds
function timer_start()
{
 c();
 couter++;
}
function start() {timer = window.setInterval("timer_start()",idle*1000);}
//–>
</script>
<body id=b onkeydown="c();return false;" onload="start()">
<div id=d style="position:absolute;top:10px;left:10px;border:0px red solid;background-color:gray;width:100px;height:100px;display:none;">
</div>
</body>
     

  • admin 8:55 pm on April 11, 2007 Permalink | Reply
    Tags: javascript   

    yui-ext 文档 

    http://sp.eaxi.com/ext/doc

    例子： http://sp.eaxi.com/ext/try/

     

     

  • admin 1:03 am on February 16, 2007 Permalink | Reply
    Tags: javascript   

    过年没有什么事做，开始学习YUI 

    官方网站：http://developer.yahoo.com/yui/

    最新包下载：2007.02.16 见附件

    文档（本地）：http://blog.eaxi.com/YUI/docs/

    酷。

     

  • admin 12:53 am on February 16, 2007 Permalink | Reply
    Tags: javascript   

    Javascript里边class的一个简单应用 

    [php]

    <script language="JavaScript">
    <!–
    /*
    function seaprince()
    {
    this.name="梁";
    this.gender="男";
    this.show = function ()
    {
    var call = this.gender=="女"?"女士":"先生";
    alert(‘你好，’+this.name+”+call);
    }
    };
    // 创建一个新对象

    var s=new seaprince;
    s.show();
    */
    var seaprince = new Object();
    seaprince.name = "梁";
    seaprince.gender="男";
    seaprince.show = function () {
    var call = this.gender=="女"?"女士":"先生";
    trace(‘你好，’+this.name+”+call);
    };
    seaprince.show();
    //–>
    </script>

    [/php]

     

  • admin 10:37 am on February 13, 2007 Permalink | Reply
    Tags: javascript   

    Javascript 中cookie的一个完整应用 

    [php]

    <style>
    .menu_cur {background-color: red;display:inline; border:#ccc solid 1px;width:100px;text-align:center;cursor:pointer;}
    .menu   {background-color: white;display:inline; border:#ccc solid 1px;width:100px;text-align:center;cursor:pointer;}
    </style>
    <ul>
     <li class=’menu’ name=’menu’ id=’menu1′ onclick=’menu_click(this)’>dsfdsf</li>
     <li class=’menu’ name=’menu’ id=’menu2′ onclick=’menu_click(this)’>fdsfd</li>
     <li class=’menu’ name=’menu’ id=’menu3′ onclick=’menu_click(this)’>fsdf</li>
     <li class=’menu’ name=’menu’ id=’menu4′ onclick=’menu_click(this)’>fdsf</li>
     <li class=’menu’ name=’menu’ id=’menu5′ onclick=’menu_click(this)’>erwq</li>
     <li class=’menu_cur’ name=’menu’ id=’menu6′ onclick=’menu_click(this)’>4324</li>
     <li class=’menu’ name=’menu’ id=’menu7′ onclick=’menu_click(this)’>657676</li>
    </ul>
    <script type="text/javascript">
    <!–
    function $(id) {return document.getElementById(id);}
    function menu_click(obj) {
     var lis=document.getElementsByTagName(‘li’);
     var i =0;
     for(i=0;i<lis.length;i++) {
      if(lis[i].name==’menu’)lis[i].className = ‘menu’;
     }
     obj.className = ‘menu_cur’;
     setCookie(‘menu_cur’,obj.id);
     cur = getCookie(‘menu_cur’);
     $(‘i’).innerHTML = ‘cookie: ‘+cur;
    }
    function init() {
     cur = getCookie(‘menu_cur’);
     $(‘i’).innerHTML = ‘cookie: ‘+cur;
     n = document.getElementById(cur);
     if(n != null) {
      menu_click(n);
     }
    }
    /*** cookie ***/
    function setCookie(name, value) {
      document.cookie = name + "=" + escape(value);
    }

    function getCookie(Name) {
     var search = Name + "="
     if(document.cookie.length > 0) {
       offset = document.cookie.indexOf(search)
       if(offset != -1) {
         offset += search.length
         end = document.cookie.indexOf(";", offset)
         if(end == -1) end = document.cookie.length
         return unescape(document.cookie.substring(offset, end))
       }
       else return ""
     }
    }
    /**************/
    //–>
    </script>
    <body onload=’init()’>
    <div id=’i'></div>

    [/php]

    效果：

     

  • admin 12:51 am on February 13, 2007 Permalink | Reply
    Tags: javascript   

    Javascript里边cookie的一个简单应用 

    一般，javascript中cookie的应用都是相对简单的，往往就是想要记得某个层的当前位置，记住用户的一些简单个人设置，等等。如果说你有比这大的应用，建议你跟服务器的session配合使用。

    本文这个应用很简单，也很实用，如果你有同样的需要，可以看一下。

    先看代码：

    [php]<script language="JavaScript">
    <!–
    i=0;
    function sc(name,value) {
     i++;
     document.cookie = ‘js_var=’+i;
    }
    function gc() {
     document.getElementById(‘v’).innerHTML=document.cookie;
    }
    //–>
    </script>
    <div id=’v'></div>
    <input type="button" value=’click’ onclick="sc();gc();">[/php]

    效果：

     

    怎么样，感觉还可以吧！是不是比网上的很多方法都要简单容易理解得多！？能实现效果的方法中，最简单的就是最好的。

     

  • admin 9:09 am on January 30, 2007 Permalink | Reply
    Tags: javascript   

    发一个我见过最好用的JS无限级目录类（无限级目录树） 

    Functions
    add()
    Adds a node to the tree.
    Can only be called before the tree is drawn.

    id, pid and name are required.

    Parameters
    Name Type Description
    id Number Unique identity number.
    pid Number Number refering to the parent node. The value for the root node has to be -1.
    name String Text label for the node.
    url String Url for the node.
    title String Title for the node.
    target String Target for the node.
    icon String Image file to use as the icon. Uses default if not specified.
    iconOpen String Image file to use as the open icon. Uses default if not specified.
    open Boolean Is the node open.

    Example
    mytree.add(1, 0, ‘My node’, ‘node.html’, ‘node title’, ‘mainframe’, ‘img/musicfolder.gif’);

    openAll()
    Opens all the nodes.
    Can be called before and after the tree is drawn.

    Example
    mytree.openAll();

    closeAll()
    Closes all the nodes.
    Can be called before and after the tree is drawn.

    Example
    mytree.closeAll();

    openTo()
    Opens the tree to a certain node and can also select the node.
    Can only be called after the tree is drawn.

    Parameters
    Name Type Description
    id Number Identity number for the node.
    select Boolean Should the node be selected.

    Example
    mytree.openTo(4, true);

    Configuration
    Variable Type Default Description
    target String true Target for all the nodes.
    folderLinks Boolean true Should folders be links.
    useSelection Boolean true Nodes can be selected(highlighted).
    useCookies Boolean true The tree uses cookies to rember it’s state.
    useLines Boolean true Tree is drawn with lines.
    useIcons Boolean true Tree is drawn with icons.
    useStatusText Boolean false Displays node names in the statusbar instead of the url.
    closeSameLevel Boolean false Only one node within a parent can be expanded at the same time. openAll() and closeAll() functions do not work when this is enabled.
    inOrder Boolean false If parent nodes are always added before children, setting this to true speeds up the tree.

    Example
    mytree.config.target = “mytarget”;

    演示：[URL=http://blog.eaxi.com/upload/dtree/]http://blog.eaxi.com/upload/dtree/[/URL]

    下载：[URL=http://blog.eaxi.com/upload/dtree.zip]http://blog.eaxi.com/upload/dtree.zip[/URL]

     

  • admin 10:22 pm on October 7, 2006 Permalink | Reply
    Tags: javascript   

    动态表格 

    主要特点：

    任意标准数据表格（无跨行和跨列），只要设定 id （默认为 id = PowerTable ）即可生效！

    任意修改、删除、编辑、表格行列，支持拖动表头交换列；

    按列中英文排序（中文排序支持拼音和笔画，500 行 中文排序 不到 3 秒！感谢 myhyli 帮助，提高了排序速度）

    倒出生成精简数据表（无冗余代码）

    相关显示颜色可以通过下面变量自行定制
    show_col = false;
    charMode = 1;
    act_bgc = “#BEC5DE”;
    act_fc = “black”;
    cur_bgc = “#ccffcc”;
    cur_fc = “black”;

    ATT. 如果在较大的页面中引用，请将 window.onload 事件的内容指向 PowerTable 之后！

    PS. 我的汉字排序方法和秋水的应该至少是相当的，都是引用字表，取索引位，只是没有加上拼音识别罢了，就效率上应该相当的（原理都一样）！


    First Name Last Name Team Engine Tyres Fastest Lap 国家
    Michael Schumacher Ferrari Ferrari Bridgestone 1.15.872 德国
    Rubens Barrichello Ferrari Ferrari Bridgestone 1.16.760 法国
    Ralph Schumacher Williams BMW Michelin 1.16.297 美国
    Juan-Pablo Montoya Williams BMW Michelin 1.17.123 柬埔寨
    David Coulthard McLaren Mercedes Bridgestone 1.16.423 泰国
    Mika Hakkinen McLaren Mercedes Bridgestone 1.16.979 越南
    Jarno Trulli Jordan Honda Bridgestone 1.16.459 菲律宾
    Ricardo Zonta Jordan Honda Bridgestone 1.17.328 英国
    Olivia Panis BAR Honda Bridgestone 1.16.771 蒙古
    Jacques Villeneuve BAR Honda Bridgestone 1.17.035 马来西亚
    Kimi Raikkonen Sauber Petronas Bridgestone 1.16.875 缅甸
    Nick Heidfeld Sauber Petronas Bridgestone 1.17.165 朝鲜
    Eddie Irvine Jaguar Cosworth Michelin 1.18.016 中国
    Pedro de la Rosa Jaguar Cosworth Michelin 1.18.015 俄罗斯
    Hugh Gengine Lotus Renault Michelin 1.15.015 韩国
    Gloria Slap Lotus Renault Michelin 1.15.012 日本

    ( Move:

    )
    汉字排序：

    Show Detail

    这是blueidea上的一个牛人在2002年11月18日完成的，到今天，我才清楚这是怎么回事儿！

    可悲！！！

     

  • admin 2:36 am on July 5, 2006 Permalink | Reply
    Tags: javascript   

    [转]关于AJAX应用所解决的一些常见问题 

    不可否认，我是非常看好AJAX技术的。我以为AJAX技术对于互联网，就像HTML对于互联网一样。但同时又要看到，AJAX技术不能完全取代我们常规的WEB开发技术。AJAX技术有它让人眼睛一亮的优点，同时它也有很多弱点。 我们作为开发人员，不能因为AJAX技术好，就在WEB开发中全部使用AJAX。

    对了，不能为了AJAX而AJAX，就像钢要用到刀刃上一样，AJAX应该用在能充分发挥它的优点的地方。而大多数的时候，我们还需要和往常一样，使用MVC的实现STRUTS开发框架。

    提到AJAX，不能不提到与它一起被强调的另一个词：用户体验。AJAX丰富了B/S模式的表现层，对于B/S模式的UI来说，它号称没有做不到、只有想不到。这里说来说去，都是一个用户体验的问题。AJAX号称无刷新，其实很多时候，用户需要有刷新才能知道有了页面提交，如在保存数据的时候，所以在这个时候使用AJAX却有害于用户体验的。

    那么在什么时候可能使用到AJAX呢？第一、请求的提交是为了页面数据的显示，这时候用户一般不希望看到页面的刷新，是使用AJAX的一个最佳时候。第二、如果请求提交后，用户能从页面感觉到提交结果，这时候，也最好不要有页面刷新，推荐使用AJAX技术。第三、如果请求提交后，用户不能从页面感觉到提交动作，如绝大多数时候的数据的增加和修改，这时候则需要页面刷新，不能使用AJAX技术。第四、复杂的UI，以前对于复杂的C/S模式的UI，B/S模式一向采取逃避的方法，现在则可以放心大胆的使用AJAX来加以解决。

    AJAX技术的实践，就像有了魔法一样，一旦你使用了一次，就会爱不释手。面对精彩的AJAX技术，还等什么？赶快看看您的WEB应用里，有没有下列问题之一，如果有的话，不妨用AJAX试试看！

    第一、输入值校验的问题。

    输入校验是我们经常遇到的问题，这种问题很多时候是可以在JS里解决。但有些时候却需要访问后台，如在申请用户的时候检查用户名是否重复等等问题。用AJAX吧，页面不会有刷新。

    第二、级联显示的问题。

    　　这种问题应该是我们遇到的最多的表现层的问题，常常让我们左右为难：你说访问后台吧，页面需要刷新，用户体验很不好；你说用JS解决吧，确实有点让JS勉为其难，强行用JS解决了，代码一大堆不说，数据量大的话还会有内存问题，而且数据也不安全。

    　　这类的问题很多：最常见的是级联的两个或更多的选择框，还有选择框的变形，级联菜单，导航树等等。

    　　遇到了这一类的问题，赶快行动吧！用AJAX访问后台，既不需要刷新页面，也没有过多的JS代码，一举两得。

    第三、请求结果只改变部分页面。

    这一类的问题我们也会时常碰到，如，论坛的回复帖子和帖子列表在一个页面上的时候。这两个UI在一个页面上，用户体验比回复帖子在另外一个页面好。但回复后要对整个页面进行刷新，这种感觉就不好了。你看，那么大一个帖子列表，只增加你的一个回复，却要对整个页面进行刷新，不管从哪个角度来看都不好。

    这一类的问题不管是用户体验，还是从技术的角度来讲，都是使用AJAX最好不过。

    第四、由于技术原因而使用iframe的问题。

    Iframe的问题纯粹是由于技术的原因引起的。为了解决技术问题而引入iframe,却iframe的一再嵌套却又引入了其他的技术难题。有的想尽办法来勉强解决这个问题，有的却干脆不要使用iframe。不使用iframe，而使用JS的解决方法却是繁琐的。现在不用左右为难了，使用AJAX就是最好的解决方案。

    第五、数据录入和列表显示在同一个页面。

    C/S模式的UI中常常有数据录入和数据列表显示在同一个界面上，这样对于用户来说有很好的用户体验，用户录入的结果马上就能在同一界面显示。但是在B/S的UI上，由于需要提交刷新的问题，我们经常把数据的录入和数据显示分别放在两个不同的页面上。很显然，这样的用户体验肯定没有C/S模式来得好。像这样的问题还有很多，在B/S模式下，都因为技术的原因而选择其他的解决办法。现在我们可以自豪的使用AJAX来宣告可以做出和C/S模式一样复杂的UI了。

    第六、翻页问题。

    如果有技术可以使翻页不需要刷新，你愿不愿意尝试一下呢？有很多这样的数据显示的问题需要刷新哦，考虑一下AJAX！

    　　

     

  • admin 3:02 am on June 30, 2006 Permalink | Reply
    Tags: javascript   

    AJAX的编码问题 

    晕死了！！
    原来在ajax的数据传输中，不支持GB2312！！
    感觉象是限制死在UTF-8了！
    原来乱码是这样产生的。

    解决方案：
    把文件改成UTF-8编码。
    方法：
    用editplus打开文件，文件另存为！存成utf-8成就可以了。

    如果谁有更好的方法，希望可以不吝赐教！
    （建议把editplus的默认编码设为utf-8.方法：工具－配置用户工具－文件－新建文件为pc utf-8.）

    [FONT-COLOR=Red]－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－[/FONT-COLOR]
    这里，firefox和IE对表单里的数据的处理方式也是不一样的。
    这也是firefox标准的一个地方。
    一个utf-8的文档以GET方式传递时，IE得到的是GB2312,firefox得到的是跟文档一样的字符集！也就是utf-8.

    下一个问题：
    xmlHttp.send();的数据都去哪里了？

     

← Older posts

Newer posts →

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel