事件代理时,   必威:1.可选择游戏时间

扩展JQuery很容易,作为一个练习,编写一个简单的分页插件,代码量不大,直接看代码好了:

功能模块:   程序设计:
   1.可选择游戏时间,显示倒计时       1.定义全局变量
   2.可选择英文字母出现个数         2.控制游戏时间函数
   3.统计得分                3.动画效果
   4.菜单选项                4.设定字母图片出现的时间
                        5.判断函数
                        6.游戏菜单
                        7.游戏时间选项
                        8.显示游戏时间
                        9.游戏难度选项
                        10.游戏得分
  
  先上效果图:(PS:美工是硬伤)
必威 1
主要代码设计:

---------------------------------------------------------------------------------

/**
 * 功能说明:      判断密码强度
 * @param:    val<密码值>
 **/
verifyCheck.pwdStrong = function (val) 

{
    var lv = 0;
    if (val.match(/[a-z]/g)) { lv++; }
    if (val.match(/[A-Z]/g)) { lv++; }
    if (val.match(/[0-9]/g)) { lv++; }
    if (val.match(/(.[^a-z0-9A-Z])/g)) { lv++; }
    if (lv > 4) { lv = 4; }
    if (lv === 0) return false;
    return lv;
};

---------------------------------------------------------------------------------

/**
 * 功能说明:     获取属性值
 * @param:    obj<元素> ,attr<属性> 参数不能有空格

 * 调用实例: getStyle(oDiv,"maxWidth");

**/

jQuery实现列表的全选功能,jquery列表全选

只需要几行代码就可以实现列表的全选功能,并且可以配合post请求执行后台的删除程序

js

复制代码 代码如下:
function DelAlert(data)
    {
        if(data == 'error')
        {
            alert("错误~");
        }
        else if(data == 'success')
        {
            alert("成功~");
            location.reload();
        }
    }
    //引入jquery,这里后台配合的是thinkphp
    $(function(){
        //每行的checkbox需要有check-value属性来存放当前行的id
        //选中全部,checkAll 为选中全部的checkbox的id selctone 为每一行checkbox的class
        $('#checkAll').selectall('selectone');
        //删除选中,deleteAll为删除全部按钮的id  selectone 为每一行checkbox的class 后台接收参数ids 格式如: 1,2,3
        var url = "Home/Role/delall'";
        $('#deleteAll').delselect('selectone',url,function(data){
            DelAlert(data);
        },function(){
            layer.msg("没有选中内容",2,0);
        });
    })

jquery.selectall.js

复制代码 代码如下:
(function( $ ){
    $.fn.selectall = function(className) {
        $(this).bind('click',function()
        {
            if($(this).attr('checked') == 'checked')
            {
                $(this).attr("checked",false)
                $('.'+className).attr('checked',false);
            }else{
                $(this).attr('checked','checked');
                $('.'+className).attr('checked','checked');
            }
        });
        $('.'+className).bind('click',function()
        {
            if($(this).attr('checked') == 'checked')
            {
                $(this).attr("checked",false);
            }else{
                $(this).attr('checked','checked');
            }
        });
    };
    $.fn.delselect = function(className,url,fun,unselectfun){
        $(this).bind('click',function(){
            var selectid = '';
            $("."+className).each(function(){
                if($(this).attr('checked')=='checked'){
                    selectid+=$(this).attr('check-value')+',';
                }
            });
            if(selectid)
            {
                selectid = selectid.substring(0,selectid.length-1);
                $.post(url,{ids:selectid},function(data){
                    fun(data);
                });
            }else
            {
                unselectfun();
            }
        });
    };
})( jQuery );

以上所述就是本文的全部内容了,希望大家能够喜欢。

只需要几行代码就可以实现列表的全选功能,并且可以配合post请求执行后台的删除程序 js 复制代...

1)禁用右键单击功能 如果你想为用户保护网站信息,那么开发者可以使用这段代码——禁用右键单击功能。

$.fn.mypagination = function{ opts = $.extend({ perPage:10, callback:function; return this.each{ function numPages(){ return Math.ceil(totalProperty/opts.perPage); } function selectPage{ return function(){ currPage = page; if  currPage = 0; if  currPage = numPages; $('img.page-wait',panel).attr('src','images/wait.gif'); opts.callback; $('img.page-wait',panel).attr('src','https://www.jb51.net/article/images/nowait.gif'); } } function render(){ var html = '

复制代码 代码如下:

function getStyle(obj,attr) 
{
return obj.currentStyle ?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}

复制代码 代码如下:

' +'

 
//-------全局变量------- 
var data={ 
"10":["<img src='images/A.gif'/>"],"11":["<img src='images/B.gif'/>"],"12":["<img src='images/C.gif'/>"],"13":["<img src='images/D.gif'/>"], 
"14":["<img src='images/E.gif'/>"],"15":["<img src='images/F.gif'/>"],"16":["<img src='images/G.gif'/>"],"17":["<img src='images/H.gif'/>"], 
"18":["<img src='images/I.gif'/>"],"19":["<img src='images/J.gif'/>"],"20":["<img src='images/K.gif'/>"],"21":["<img src='images/L.gif'/>"], 
"22":["<img src='images/M.gif'/>"],"23":["<img src='images/N.gif'/>"],"24":["<img src='images/O.gif'/>"],"25":["<img src='images/P.gif'/>"], 
"26":["<img src='images/Q.gif'/>"],"27":["<img src='images/R.gif'/>"],"28":["<img src='images/S.gif'/>"],"29":["<img src='images/T.gif'/>"], 
"30":["<img src='images/U.gif'/>"],"31":["<img src='images/V.gif'/>"],"32":["<img src='images/W.gif'/>"],"33":["<img src='images/X.gif'/>"], 
"34":["<img src='images/Y.gif'/>"],"35":["<img src='images/Z.gif'/>"]
};
var datas=new Array();//随机出现的 class样式以数组中偶数存储,图片以数组中奇数存储
var now=new Date();
var Image; //随机出现图片
var Divs;//随机出现层
var count=0;//积分系统
var key;//键盘的值
var amounts=1;//出现字母图片的个数
var gametime=30;//控制游戏的时间
var gametimes;//时间为0
var gametimess=30;//显示时钟变量
var time1;//setInterval变量
var time2=5000;//设定setInterval的时间
var time3;
var tab;//用来记录,传递tabindex焦点位置的值
//--------这样写为了兼容FF浏览器-------
var plug = {
addEvent:function(o,e,f){
if(o.addEventListener){
o.addEventListener(e,f,false);
}
else if(o.attachEvent){
o.attachEvent("on"+e,f);
}
}
}
plug.addEvent(window,"load",function(){Focus()});//兼容FF浏览器
//------1.控制游戏时间函数--------
function Gametime(){
for(gametimes=gametime;gametimes>=0;gametimes--) {
window.setTimeout('Show(' + gametimes + ')',(gametime-gametimes+2) * 1000);
}
}
function Show(gametimes){
if(gametimes==0){
clearInterval(time1);//停止游戏
alert("游戏结束!你的得分为:"+count);
$("#main").empty();//清除main中的div
$(".gameapply").empty();
$("#select1").empty();
$("#select2").empty();
count=0;//得分清空为0
Score();//让分数框显示为0
Focus();//重新生成菜单选项
}
}
//---------2.动画效果---------
function fun(){
datas.length=0;
for(var i=0;i<amounts;i++){
Image=parseInt(Math.random() * 26)+10;//随机出现字母图片
datas.push(Image);//图片以数组中偶数存储,从零开始
Divs=parseInt(Math.random() * 8)+1;//随机出现层的class样式即层的不同位置
datas.push(Divs);//样式以数组中奇数存储
var time=parseInt(Math.random() * 2000)+3000;//完成动画的时间
if(time<5000){
var $divs=$("<div class='divPop"+Divs+"'>"+data[Image]+"</div>");
$("#main").append($divs);
//-----JQ动画函数----
$(".divPop"+Divs).animate(
{"top":$(window).height() - $(".divPop"+Divs).height() - $(".divPop"+Divs).position().top},time,function(){$("#main").empty()})
}
}
}
//--------3.设定字母图片出现的时间------
function sets(){
time1 = setInterval(fun,time2);
}
//---------4.绑定键盘---------
//---------兼容FF浏览器---------
document.onkeydown = function keydown(e){
e = e||window.event;
var key = e.charCode||e.keyCode
select(key)
}
//---------5.判断函数---------
function select(key){
if(key==13){
switch(tab){
case 0:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//开始游戏
case 1:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//开始游戏
case 2:alert("可以在左侧设置游戏选项");break;
case 3:window.opener=null;window.open('','_self');window.close();break;//退出游戏
case 4:window.opener=null;window.open('','_self');window.close();break;//退出游戏
}
}
for(var j=0;j<datas.length;j=j+2){//为了让data1里面样式和图片的值不重复(即奇数跟偶数的不可能重复,m的值或者k的值要相差一定的值)
if(key==datas[j]+55){
$(".divPop"+datas[j+1]).hide();//key值相等,隐藏该层
delete datas[j]; //为了避免有重复的字母,所以数组里面每遍历到一个(key==datas[j]+55)都要删除这个值
count+=10;
Score();
break;
}
}
}
//---------6.游戏菜单-------
function Focus(){
//---------初始化游戏界面--------
var $selects=$("<div id='select'><table id="tables"><tr><td><input class="inputs" type="text"value="游戏开始"/></td></tr><tr><td><input class="inputs" type="text" value="游戏选项"/></td></tr><tr><td><input class="inputs" type="text" value="退出游戏"/></td></tr></table></div>");
$(".gameapply").append($selects);
for(var i=30;i<=300;i=i+30){
$("#select1").append('<option>' + i+ '</option>')
}
for(var j=1;j<=9;j++){
$("#select2").append('<option>' + j+ '</option>')
}
//---------开始时取得第一个input的焦点--------
$(".inputs:first").trigger("focus").addClass("input1");
tab=1;//因为第一个焦点是没法输入Enter,所以要调用键盘输入事件
var tabIndex=1;
//----------获取tr行数,input个数--------
$("#tables").find("tr").each(function(r) {
$(this).find("input").attr("tabindex", r+1);//tabindex为焦点位置的值,赋初值为1,遍历为1-2-3-4
});
//---------响应input的键盘上下操作
$("#tables .inputs").bind("keydown", function(e){
tabIndex = parseInt($(this).attr("tabindex"));//取得当前tabindex焦点的值
switch(e.which){
case 38://向上
tabIndex-=1;
tab=tabIndex;
break;
case 40://向下
tabIndex+=1;
tab=tabIndex;
break;
default:
return;
}
//--------判断tabIndex焦点的值
if (tabIndex > 0 && tabIndex < 4) {
$(".inputs[tabindex=" + tabIndex + "]").focus().addClass("input1");//当前input获取焦点
for(var i=0;i<=4;i++)
{
if(i==tabIndex){
break;
}
else{
$(this).removeClass("input1");
}
}
keydown();
return false;
}
return true;
});
}
//--------7.游戏时间选项---------
function Gametimeselect(){
var option=document.getElementById("select1");
for(var i=0;i<option.length;++i){
if(option[i].selected) {
gametime=option.options[i].text;
gametimess=gametime;
}
}
}
//-----8.显示游戏时间-------
function countdown(){
var timeshows=document.getElementById("timeshow");
if(timeshows){//如果网页速度很慢的话,可能定时器运行的时候控件还没有加载
if(gametimess<0){
clearInterval(time3);//停止计时器
}
else{
timeshows.value=gametimess;
gametimess--;
}
}
}
//--------9.游戏难度选项---------
function Gameselectamount(){
var option=document.getElementById("select2");
for(var i=0;i<option.length;++i){
if(option[i].selected) {
amounts=option.options[i].text;
}
}
}
//---------10.游戏得分-----------
function Score(){
var sum=document.getElementById("sum");
sum.value=count;
if(count==0){ //初始化文本框分数为0
sum.value=count;
}
}

---------------------------------------------------------------------------------

/**
 * 功能说明: 全选
 * @param:    

**/

$("#checkboxAll").click(function(){
    var state = $(this).prop('checked');
    $("input:checkbox[name='checkbox']").prop('checked',state);
});

---------------------------------------------------------------------------------

/**
 * 功能说明:    IE6浏览器提示
 * @param:    

 * 调用实例: getStyle(oDiv,"maxWidth");

**/

$(document).ready(function() {
 //catch the right-click context menu
 $(document).bind("contextmenu",function(e) {    
  //warning prompt - optional
  alert("No right-clicking!");

总结:由于时间隔得比较久,代码方面没有优化,有个地方做得不是很好,就是字母出现的时间间隔过长,有兴趣的话可以尝试修复。代码仅供参考
在线演示:
打包下载:

  <!--[if IE 6]>

  //delete the default context menu
  return false;
 });
});

' +'

程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效...

        <script>

2)使用jQuery设定文本大小 使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少)。

            var fRemindBox = $('<div class="FRemindBox"></div>');

复制代码 代码如下:

' +'

            var fRemind = $('<div class="FRemind"></div>');

$(document).ready(function() {
 //find the current font size
 var originalFontSize = $('html').css('font-size');

第页/共'+numPages()+'页

            var femindInfo = $('<div class="RemindInfo"><span>您的浏览器版本过旧,请升级您的浏览器。</span></div>');

 //Increase the text size
 $(".increaseFont").click(function() {
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNumber = parseFloat(currentFontSize, 10);

' +'

            var femindLogo = $('<div class="RemindLogo"><a class="ChromeLogo" href="" target="_blank">' +

  var newFontSize = currentFontSizeNumber*1.2;
  $('html').css('font-size', newFontSize);
  return false;
 });

                '<img src="/Content/themesChromeLogo.jpg" /></a><a class="firefoxLogo" href="" target="_blank">' +

 //Decrease the Text Size
 $(".decreaseFont").click(function() {
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);

' +'

                '<img src="/Content/themesFFLogo.jpg" /></a><a class="ieLogo" href="" target="_blank">' +

  var newFontSize = currentFontSizeNum*0.8;
  $('html').css('font-size', newFontSize);
  return false;
 });

                '<img src="/Content/themesieLogo.jpg" /></a></div>');  

 // Reset Font Size
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
  });
});

' +'

            fRemindBox.append(fRemind.append(femindInfo).append(femindLogo));

3)在新窗口打开链接
使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验。

必威 2

            $("body").prepend(fRemindBox);

复制代码 代码如下:

' +'

        </script>

$(document).ready(function() {
 //select all anchor tags that have http in the href
 //and apply the target=_blank
 $("a[href^='http']").attr('target','_blank');
});

本文由必威发布于必威-运维,转载请注明出处:事件代理时,   必威:1.可选择游戏时间

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。