JS无尽循环 - 动威9号-Flex、Flash技术探讨 - 动威9号是bearjia的私人领地，致力研究Flex、Flash、JS等技术

Jun 28

用jQuery来打造tips提示效果

bearjia , 11:16 , JS无尽循环 , 评论(0) , 引用(0) , 阅读(1487) , Via 本站原创

见到不少的游戏网站上都有鼠标悬停显示提示内容的效果
今天，我也用jQuery来打造一个tips提示效果
JQ库选用的是最新版本，1.4.2版，jquery-1.4.2.min.js
效果图如下：

代码如下：
样式----------------------------------

JS脚本----------------------------------

HTML代码------------------------------

<p><a href="#" title="这是我的超链接提示1.">《大师的》</a></p>
<p><a href="#" title="这是我的超链接提示2.">《特别的》</a></p>
<p><a href="#" title="<img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl>">《传说中的一世》</a></p>
<p><a href="#" title="<img src=x.jpg><dl>他可是U9上的大红人哦，在DOTA界名声可是响当当啊。</dl>">《额外哦》</a> </p>

这也就是利用了JQ全局对“A”标签的搜索，来获取title属性以及a标签内文本内容，都会转化成HTML格式。
而tips提示效果的背景是一个PNG的半透明图片，这样在IE6这个浏览器下就不能透明了，其它主流浏览器都没有问题，解决办法是有，但是不在本文范围内，不多讲。
然后title里面的内容也有限制，尽量还是少放内容。
这个效果在会员列表、商品列表、游戏道具等地方将发挥比较大的作用，普通JS也可以达到这个效果，但是就一个项目的整体来说，还是建议选用jQuery，集成化较好。
相比较flash的tips类，JQ正在超越。无论元素的丰富度、易用度、以维护性，都可以看出JQ的优越。

Jun 24

js 时间倒计时代码

bearjia , 14:23 , JS无尽循环 , 评论(0) , 引用(0) , 阅读(1382) , Via 本站原创

前几日做的要发宝团购网站中需要用到了时间的倒计时，决定选择用JS和FLASH来实现，最后敲定使用JS。
原因无二，JS的代码量小，相比更效率。
首先定义一个函数left，由程序来输出剩余时间，以秒为单位。
当然，这个时间可是随时变化着的，必须加一个setInterval计时器。

<div id="time"></div>
<script type="text/javascript">

var left = 360; // 剩余时间
setTime();
function setTime() {
  if (left) {
    left --;
    var hour = Math.floor(left / 3600);
    hour = (hour < 10) ? ('0' + hour) : hour;
    var minute = Math.floor((left % 3600) / 60);
    minute = (minute < 10) ? ('0' + minute) : minute;
    var second = (left % 3600) % 60;
    second = (second < 10) ? ('0' + second) : second;

    var time = document.getElementById('time');
    time.innerHTML = '<span>' + hour + '</span>小时<span>' + minute + '</span>分<span>' + second + '</span>秒';
  } else {
    /*window.location.reload();*/
    var time = document.getElementById('time');
    time.innerHTML = '团购时间结束';
  }
}
window.setInterval(setTime, 1000);
</script>

Tags: js时间倒计时 , js倒计时

Jun 19

js来输出日期

bearjia , 19:32 , JS无尽循环 , 评论(0) , 引用(0) , 阅读(566) , Via 本站原创

js来输出日期代码如下：

function tick() { var today = new Date(); theday =[today.getMonth()+1]+"-" +today.getDate(); for(i=0;i<=2;i++){ var menu=document.getElementById("sb"+i); menu.innerHTML = theday; } } tick();

输出到页面上的ID为SB[0-i]的元素中
后来发现这样的做法只适合动态输出的页面元素
而定死的元素这样做就极其麻烦。

后来干脆就直接将所有的ID都统一为一个值，然后通过数组的方式来输出，那样即可完美解决。

Tags: js , 日期

Jun 18

js和select控件的交互操作

bearjia , 09:32 , JS无尽循环 , 评论(0) , 引用(0) , 阅读(622) , Via 本站原创

公司的论坛需要频道页，上面涉及到了一些小功能的增加。
用到了较多的select控件来控制一些搜索之类的。级联倒是没用到，基本的操作做下记录

JS取select中option的值
var sel = document.getElementById("waterpost");
var m=sel.options[sel.selectedIndex].value;

取select中option的文字
var sel = document.getElementById("waterpost");
var m=sel.options[sel.selectedIndex].text;

js改变form表单中action地址

很简单，就是如此
document.getElementById("bearpost").action="thread.php?fid=2&modelid=20";

js检查form表单中的值
if(document.bearpost.waterpost.value == "0"){
    alert("请选择搜索性别！");
    return false;
    }
  }
判断表单bearpost中name为waterpost的控件为0就弹出警告
form则要写入 onSubmit="return CheckForm();"来促发事件

那JS如何改变选中项的值呢？
objSelect.options[objSelect.selectedIndex] = new Option("你好","hello");
对象一样用getElementById来获得

Tags: select , option , selectedindex , objselect , getelementbyid

May 13