菜单

jQuery简单实现投票功能,jquery光标位置插入

2019年8月2日 - 前端排行

复制代码 代码如下:

div+css+jQuery简单实现投票功能,divjquery

昨天看到C#群里有人问一个投票功能如何实现…

我对此很感兴趣,为了练习一下,就有了以下代码。

投票功能使用jQuery实现..纯html代码…数据通过json字符串传递,通过
eval转换为json对象

投票功能分为:

1.设置投票内容:

图片 1

 

2.投票:

图片 2

 

3.投票结果:

图片 3

文件列表:

图片 4

 

传值:

{
    info: ”   由京东针对国美苏宁发起的新一轮电商大战随着当当、易讯等企业的“乱入”,正演变为整个国内电商行业的混战。电商“8.15”价格战谁会是最后的赢家?今年的电商排位战,谁能笑到最后?<br/><br/>1.今年是电商排位战,你最看好谁?<br/>——————–isea533———————-“,
    choices: [{
        name: “choice0”,
        value: “京东商城”,
        num: 6,
        percent: 0.25
    },
    {
        name: “choice1”,
        value: “苏宁易购”,
        num: 5,
        percent: 0.20833333333333334
    },
    {
        name: “choice2”,
        value: “国美商城”,
        num: 4,
        percent: 0.16666666666666666
    },
    {
        name: “choice3”,
        value: “当当网”,
        num: 2,
        percent: 0.08333333333333333
    },
    {
        name: “choice4”,
        value: “亚马逊中国”,
        num: 3,
        percent: 0.125
    },
    {
        name: “choice5”,
        value: “天猫(原淘宝商城)”,
        num: 4,
        percent: 0.16666666666666666
    }]
}

 

jquery实现在光标位置插入内容的方法,jquery光标位置插入

本文实例讲述了jquery实现在光标位置插入内容的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:

<!DOCTYPE html> 
<html> 
<head> 
    <title>无标题页</title> 
    <script type=”text/javascript”
src=”jquery-1.7.2.min。js”></script> 
    <script type=”text/javascript”> 
        (function ($) { 
            $.fn.extend({ 
                insertAtCaret: function (myValue) { 
                    var $t = $(this)[0]; 
                    if (document.selection) { 
                        this.focus(); 
                        sel = document.selection.createRange(); 
                        sel.text = myValue; 
                        this.focus(); 
                    } else 
                        if ($t.selectionStart || $t.selectionStart ==
‘0’)
   { 
                            var startPos = $t.selectionStart; 
                            var endPos = $t.selectionEnd; 
                            var scrollTop = $t.scrollTop; 
                            $t.value = $t.value.substring(0, startPos) +
myValue + $t.value.substring(endPos,$t.value.length); 
                            this.focus(); 
                            $t.selectionStart = startPos +
myValue.length;
                            $t.selectionEnd = startPos +
myValue.length; 
                            $t.scrollTop = scrollTop; 
                        } else { 
                            this.value += myValue; 
                            this.focus(); 
                        } 
                } 
            }) 
        })(jQuery); 
        $(document).ready(function () { 
            $(“#numd”).bind(“mouseleave”, function () { 
                document.getElementById(‘keybored’).style.display =
‘none’; 
                document.getElementById(‘Nm’).blur(); 
            }); 
            $(“#Nm”).focus(function () { 
                document.getElementById(‘keybored’).style.display =
”; 
            }); 
            $(“.readbtns”).click(function () { 
                $(“#Nm”).insertAtCaret($(this).val()); 
            }); 
        }); 
    </script> 
</head> 
<body> 
    <ul> 
        <li> 
            <input /> 
            <div> 
            </div> 
        </li> 
    </ul> 
    <input id=”hid” type=”text” value=”” style=”display: none”
/> 
    <span id=”numd” style=”border: 1px solid red; clear: both;
display: inline-block; font: 800em;”> 
        <input type=”text” id=”Nm” name=”Nm” value=”” /> 
        <div style=”display: none; border: 1px solid #A2B4C6; width:
150px; height: 400px;” 
            id=”keybored”> 
            <input type=”button” class=”readbtns” value=”1″ /> 
            <input type=”button” class=”readbtns” value=”2″ /> 
            <input type=”button” class=”readbtns” value=”3″ /> 
            <input type=”button” class=”readbtns” value=”4″ /> 
            <input type=”button” class=”readbtns” value=”5″ /> 
            <input type=”button” class=”readbtns” value=”6″ /> 
            <input type=”button” class=”readbtns” value=”7″ /> 
            <input type=”button” class=”readbtns” value=”8″ /> 
            <input type=”button” class=”readbtns” value=”9″ /> 
        </div> 
    </span> 
</body> 
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文实例讲述了jquery实现在光标位置插入内容的方法。分享给大家供大家参考。具…

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图