本文实例讲述了康盛创想表情的JS提取方法。分享给大家供大家参考,具体如下:
康盛创想将应用的表情生成了一个js文件,在知道是缓存/下,叫smilies_var。js,这个文件是根据后台数据库生成的一个表情数组,里面有两个数组,一个是表情名称和所在目录的数组smilies_type,一个是表情图片名和代码的数组smilies_array,这些都是更新缓存的时候自己读数据库生成的,所以后台的改动一样会改动到它。
论坛快速回复的表情是一个弹出层,虽然已经很不错,但仍然会增加用户的操作复杂度,因此需要将它移出来,放在边上,就向下图:
既然论坛已经将表情的数据以数组的形式放在了JS文件里,那要实现这个功能,其实就是一个操作数组的问题了,再上一些简单的翻页,换表情,点击表情输出到文本框里就行了。那现在就在拆分一下,从图上就可以看的出,表情部分一共分成了3块,1,表情种类(表情名称),2,表情列表,3分页。
看看smilies_var.js里对表情种类的数组
var smilies_type=new Array ();
smilies_type[6]=[“悠嘻猴”、“yxh”);
smilies_type[5]=['免斯基”,“tsj”);
smilies_type[4]=['蘑菇点',' mgd '];
smilies_type[3]=['呆呆男',' grapeman '];
之前
它其实就是一个2维数组,要像图上那样做,可以这样做:
& lt;脚本type=" text/javascript祝辞
我=0;
在smilies_type (var) {
我+ +;
在smilies_type (var b [a]) {
if (b==0) {
如果(i==1) {
document . write (“& lt;李类='可不可以休假一天>
& lt;脚本type=" text/javascript祝辞
函数loadsmilies (m, n、f) {
var restr=";
var restr=& lt; div祝辞的;
(var的smilies_array [n]) {
(var smilies_array b; [n] [a]) {
if (b==2) {
restr=restr +“& lt; img src=" https://www.yisu.com/zixun/images/smilies/" + smilies_type [1] + "/" + smilies_array [n][一][b] +”“alt=" onclick=" . getelementbyid (\“fastpostmessage \”) value=https://www.yisu.com/zixun/document.getElementById (/癴astpostmessage \”) value + \ " + smilies_array [n][一][1]+“\”;“风格=肮獗?指针;宽度:30 px;高度:30 px;“/比;"；
}
}
}
restr=restr +”& lt;/div> & lt; div class=' fsmilies_page祝辞”;
var mnum=smilies_array长处;
我(var=0; i< mnum-1;我+ +){
var j=i + 1;
restr=restr +“& lt; a href=https://www.yisu.com/眏avascript:; \ " onclick=\ " loadsmilies (“+ m +”、“+ j +”,“f”); \“在[j“+ +”] & lt;/a>"；
}
restr=restr +“& lt;/div>”;
. getelementbyid (f) .innerHTML=restr;
}
& lt;/script>
之前
这里面还包含了分页的处理,就是通过对数组求其长度来找到页数,然后循环输出,再调用loadsmilies()函数,传参,达到目的,每次点击都往指定的& lt; div>里输出,一切就好了。初始化代码:& lt; script type=' text/javascript '祝辞loadsmilies (6 1 f); & lt;/script>,里面的第三个参数f即为用于放表情的& lt; div> ID。
程序很简单,不多讲。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》,《JavaScript切换特效与技巧总结》,《JavaScript图形绘制技巧总结》,《JavaScript查找算法技巧总结》,《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
