JavaScript 笑脸剧本

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 笑脸剧本相关的知识,希望对你有一定的参考价值。

<script type="text/javascript">
//
// *** Smiley Script V 3.0 ***
// Original author: EasterEgg (http://www.xanga.com/easteregg)
// 
// You can use this code freely, as long as the entire script remains 
// intact, including the copyright notice. 
//
// Many thanks to Alice Woodrome (http://www.xanga.com/Alice), who handpicked 
// the emoticons that are currently present in this version of the script.
//
// VERSION HISTORY
//
// 1.0 (February 11, 2003)
// - initial release
//
// 2.0 (May 12, 2003)
// - cross browser: it runs in IE, Netscape, Mozilla and Opera
// - ready for the upcoming (beta tested) changes at Xanga
// - clickable smileys, even for non-IE users, displayed in buttons
// - customizable number of smileys displayed in one row
// - customizable smiley button size
// - easily adjustable: only two arrays to maintain
//
// 2.1 (May 12, 2003)
// - preloading images for faster performance
// - XP Bugfix
//
// 2.2 (May 17, 2003)
// - necessary adjustments made because of recent changes at Xanga
// - made suitable for Mac users!
// - runs only at the comment page for increased performance 
//
// 3.0 (Nov 5, 2005)
// - script was broken, due to changes at Xanga. Fixed.
// - script overall revised, some obsolete code removed.
//
// HOW TO USE:
// For use at Xanga only. Copy this entire code (including the script tags)
// and paste in the Website Stats box at your Look and Feel page. Make sure
// the previous version of this script (if any) is completely removed first.
//
// The script contains two arrays: "textSmileys" and "realSmileys". The items 
// present in the array "textSmileys" will be automatically replaced with the 
// corresponding images in the array "realSmileys". You can modify the arrays
// as you see fit, as long as both arrays keep the exact same number of items. 
//
// For example, suppose you want to add some smiley to the script... that would mean
// in "textSmileys" you would add a shorthand like ":some_smiley:" or {somesmiley}, 
// and in "realSmileys" you would add it's url: "http://www.dude.com/some_smiley.gif".
//
// SETTINGS:
// - "maxNumberOfSmileysPerRow": number of smileys that will be displayed in one row.
// Smileys above that number will automatically be added to a new line. 10 by default. 
// - "buttonSize": size of the smiley buttons in pixels. 30 px by default.
//
// AVAILABILITY: 
// The script has been tested in the latest versions of IE, Netscape,
// Mozilla and Opera (Windows 98).
// 
function typeSmiley(sSmiley)
{
    if (document.getElementsByTagName('textarea')[0].getAttribute('name') == 'bdescr')
        var editor = document.getElementsByTagName('textarea')[0];
    else
    {
        var allTextAreas = document.getElementsByTagName('textarea');
        for (i = 0; i < allTextAreas.length; ++i)
        {
            if (allTextAreas[i].getAttribute('name') == 'bdescr')
            {
                var editor = allTextAreas[i];
                break;
            }
        }
    }
    editor.value = editor.value + sSmiley;
}
function replaceTextSmileys()
{
    // ***add textual emoticons to the array below
    var textSmileys = new Array(
        ":)",
        ":(",
        ":wink:",
        ":p",
        ":lol:",
        ":mad:",
        ":heartbeat:",
        ":love:",
        ":eprop:",
        ":wave:",
        ":sunny:",
        ":wha:",
        ":yes:",
        ":sleepy:",
        ":rolleyes:",
        ":lookaround:",
        ":eek:",
        ":confused_2:",
        ":nono:",
        ":fun:",
        ":goodjob:",
        ":giggle:",
        ":cry:",
        ":shysmile:",
        ":jealous:",
        ":whocares:",
        ":spinning:",
        ":coolman:",
        ":littlekiss:",
        ":laugh:");
    // *** add the url's from the corresponding images below
    var realSmileys = new Array(
        "http://www.xanga.com/Images/smiley1.gif",
        "http://www.xanga.com/Images/smiley2.gif",
        "http://i.xanga.com/Alice/AliceSmileyAnimatedWink.gif",
        "http://www.xanga.com/Images/smiley4.gif",
        "http://i.xanga.com/Alice/Smileylol.gif",
        "http://i.xanga.com/Alice/7_mad.gif",
        "http://i.xanga.com/Alice/heartbeating.gif",
        "http://i.xanga.com/Alice/SmileLove.gif",
        "http://i.xanga.com/Alice/eProp.gif",
        "http://i.xanga.com/Alice/SmileyWave.gif",
        "http://i.xanga.com/Alice/sunnySmiley.gif",
        "http://i.xanga.com/Alice/wha.gif",
        "http://i.xanga.com/Alice/yes.gif",
        "http://i.xanga.com/Alice/Smileysleep.gif",
        "http://i.xanga.com/Alice/Smileyrolleyes.gif",
        "http://i.xanga.com/Alice/SmileyLookaround.gif",
        "http://i.xanga.com/Alice/Smileyeek.gif",
        "http://i.xanga.com/Alice/Smileyconfused.gif",
        "http://i.xanga.com/Alice/SmileyAnimatedNoNo.gif",
        "http://i.xanga.com/Alice/propeller.gif",
        "http://i.xanga.com/Alice/goodjob.gif",
        "http://i.xanga.com/Alice/emot-giggle.gif",
        "http://i.xanga.com/Alice/blueAnimatedCry.gif",
        "http://i.xanga.com/Alice/Animatedshysmile.gif",
        "http://i.xanga.com/Alice/AliceJealous.gif",
        "http://i.xanga.com/Alice/19_indifferent.gif",
        "http://i.xanga.com/Alice/Smileyspinning.gif",
        "http://i.xanga.com/Alice/25_coolguy.gif",
        "http://i.xanga.com/Alice/AliceSmileyAnimatedBlinkKiss.gif",
        "http://i.xanga.com/Alice/LaughingAgua.gif");
    // *** number of smileys that will be displayed per row
    var maxNumberOfSmileysPerRow = 10;
    // *** button size in pixels
    var buttonSize = 30;
    // preloading images
    var preloadedImages = new Array(realSmileys.length);
    for (i = 0; i < preloadedImages.length; ++i)
    {
        preloadedImages[i] = new Image();
        preloadedImages[i].src = realSmileys[i];
    }
    
    var allTableData = document.getElementsByTagName('td');
    var indx;
    var smiley;
    var replacement;
    
    for (var i = 0 ; i < allTableData.length ; ++i )
    {   
        for ( var n = 0 ; n < textSmileys.length; ++n )
        {
            if ((allTableData[i].innerHTML.toUpperCase().indexOf('TABLE') == -1) &&
                (allTableData[i].innerHTML.indexOf('previewHTML()') == -1))
            {
                indx = allTableData[i].innerHTML.indexOf(textSmileys[n]);
                if (indx != -1)
                { 
                    while (indx != -1)
                    {   
                        replacement = '';
                        indx = allTableData[i].innerHTML.indexOf(textSmileys[n]);
                        smiley = '<img src=\"' + realSmileys[n] + '">'
                        replacement = allTableData[i].innerHTML.replace(textSmileys[n],smiley);
                        allTableData[i].innerHTML = replacement;                  
                    }                   
                }
            }
        
        }
    }
    
    if (document.getElementById('idSmileyBar'))
    {
        var smileyCollection = new Array(realSmileys.length);
        var smileyBar = '';
        
        if (document.getElementById('htmleditor'))
        {
            for (i = 0; i < smileyCollection.length; ++i)
            { 
                smileyCollection[i] = '<button type="button" value="" ' +
                    'style="width:' + buttonSize + 'px; height:' + 
                    buttonSize + 'px;" onclick="javascript:insertHTML(\' ' + 
                    textSmileys[i] + '\'); return false;">' +
                    '<img src=\"' + realSmileys[i] + '" alt="' + textSmileys[i] +
                    '"></button>';
            }
        } 
        else
        {
           for (i = 0; i < smileyCollection.length; ++i)
            { 
                smileyCollection[i] = '<button type="button" value="" ' +
                    'style="width:' + buttonSize + 'px; height:' + 
                    buttonSize + 'px;" onclick="javascript:typeSmiley(\' ' + 
                    textSmileys[i] + '\'); return false;">' +
                    '<img src=\"' + realSmileys[i] + '" alt="' + textSmileys[i] +
                    '"></button>';
            } 
        } 
           
        for (i = 0; i < smileyCollection.length; ++i)
        {  
           if (i != 0)
               if ( (i/maxNumberOfSmileysPerRow).toString().indexOf('.') == -1) 
                   smileyBar = smileyBar + '<BR>';
           smileyBar = smileyBar + smileyCollection[i];
        }
        // add SmileyBar
        infoLink = '<a href="http://www.alicewoodrome.com/smileyscript.html"' +
            'target=blank><font style="font-size: xx-small; font-weight: normal;">' +
            'Smiley Script</font><a/><br><br>';
        smileyBarHtml = '<br><b>Add Emoticons</b><br><font style="font-size: xx-small">' + 
            'Simply add emoticons to your comments by clicking them!</font> ' + 
            infoLink + smileyBar + '<br><br>';
        obj2 = document.getElementById('idSmileyBar');
        obj2.innerHTML = smileyBarHtml;
    }
}
if (document.getElementById('idSmileyBar'))
    replaceTextSmileys();   
</script>

以上是关于JavaScript 笑脸剧本的主要内容,如果未能解决你的问题,请参考以下文章

用HTML5 Canvas画一张笑脸

javascript 索拉的剧本

Html5之canvas笑脸getContextbeginPathmoveToarcstroke

一个尖括号能干什么,画一个笑脸开始(为了支持交互,它又增添了JavaScript。HTML页面也越来越臃肿。于是CSS便诞生了。API和核心代码的出现使HTML能够访问更复杂的软件功能--支持更高级的

使用冒号、分号等符号将变量传递给 javascript 函数

☺ 这个笑脸是如何打出来的?