滑鼠點擊出現愛心+社會主義價值觀+隨機顏色的文字+滑鼠cursor自定義圖片-有解無憂

js影片--滑鼠點擊出現愛心

只需將如下JS代碼放到</body>之前就好了

<script type='text/javascript' src='https://www.cnblogs.com//api.dujin.org/js/aixintexiao.js'></script>

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
    <script type='text/javascript' src='http://api.dujin.org/js/aixintexiao.js'></script>
</head>
<body>
    <p style="margin:50px auto;width:600px;line-height:30px;">JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的編程語言，雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式和宣告式（如函式式編程）風格， [1] 
        JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成，因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript，但實際上它的語法風格與Self及Scheme較為接近， [2] 
        JavaScript的標準是ECMAScript ，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準，2015年6月17日，ECMA國際組織發布了ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES6， [1]</p>
</body>
</html>

效果圖

也可以直接放原始碼

<script type="text/javascript">
/* 縉哥哥博客滑鼠點擊顯示不同顏色愛心特效JS代碼 https://www.dujin.org/12146.html */
!function(e, t, a) {
    function r() {
        for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function n() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(),
            o(e)
        }
    }
    function o(e) {
        var a = t.createElement("div");
        a.className = "heart",
        s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
        }),
        t.body.appendChild(a)
    }
    function i(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch(t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function c() {
        return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
    }
    var s = [];
    e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
    function(e) {
        setTimeout(e, 1e3 / 60)
    },
    i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
    n(),
    r()
} (window, document);
</script>

滑鼠點擊出現社會主義價值觀（jQuery）

    <script type="text/javascript">
        
        var a_idx = 0;    
        jQuery(document).ready(function($) {       
            $("body").click(function(e) {      
                var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善");       
                var $i = $("<span/>").text(a[a_idx]);       
                a_idx = (a_idx + 1) % a.length;       
                var x = e.pageX,      
                y = e.pageY;       
                $i.css({       
                    "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,       
                    "top": y - 20,       
                    "left": x,      
                    "position": "absolute",      
                    "font-weight": "bold",     
                    "color": "#ff6651"      
                });
                
                $("body").append($i);       
                $i.animate({       
                    "top": y - 180,       
                    "opacity": 0       
                },1500,function() {    
                    $i.remove();      
                });      
            });        
        });
        
    </script>

別忘了引入jQuery

效果圖

配上::selection改變文字選中顏色，效果還是蠻不錯的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        
        var a_idx = 0;    
        jQuery(document).ready(function($) {       
            $("body").click(function(e) {      
                var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善");       
                var $i = $("<span/>").text(a[a_idx]);       
                a_idx = (a_idx + 1) % a.length;       
                var x = e.pageX,      
                y = e.pageY;       
                $i.css({       
                    "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,       
                    "top": y - 20,       
                    "left": x,      
                    "position": "absolute",      
                    "font-weight": "bold",     
                    "color": "#ff6651"      
                });
                
                $("body").append($i);       
                $i.animate({       
                    "top": y - 180,       
                    "opacity": 0       
                },1500,function() {    
                    $i.remove();      
                });      
            });        
        });
        
    </script>
    <style>
        p::selection{
            background:lightblue;
            color:#fff;
        }
    </style>
</head>
<body>
    <p style="margin:50px auto;width:600px;line-height:30px;">JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的編程語言，雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式和宣告式（如函式式編程）風格， [1] 
        JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成，因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript，但實際上它的語法風格與Self及Scheme較為接近， [2] 
        JavaScript的標準是ECMAScript ，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準，2015年6月17日，ECMA國際組織發布了ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES6， [1]</p>
</body>
</html>

原生js實作的，滑鼠點擊出現隨機顏色的文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        
        window.onload = function() {
        //定義點擊出現文字類
        function ClickFrontShow() {
            //定義所需文字和顏色
            this.fron = ['高興', '開心', '?', '歡樂', '愉悅', '愉快', '快樂', '歡喜', '喜悅', '歡欣', '歡暢', '歡騰', '雀躍', '歡快'];
            this.colo = ['#FF69B4', '#ff6651', 'orange', '#FF00FF', '#00FF7F', '#00BFFF', '#BA55D3'];
            //獲取body元素
            this.elBody = document.getElementsByTagName("body")[0];
            //初始化randomNum
            this.randomNum = null;
            //初始化字體inde
            this.finde = 0;
            //初始化className
            this.cls = 0;
        }
        
        //定義初始化
        ClickFrontShow.prototype.init = function(frontArray, colorArray) {
            //自定義顏色和字體
            this.fron = frontArray || this.fron;
            this.colo = colorArray || this.colo;
            
            this.listenMouse();
        }
        
        //創建文字 
        ClickFrontShow.prototype.createFront = function (classname) {
            var self = this;
            let ospan = document.createElement('span');
            //設定樣式
            let cssText = "position:absolute; width: 40px; height: 20px; cursor: default; transform: translate(-50%,-50%); font-weight: bold; opacity: 1; z-index: 1000; transition: 1s;";
            //隨機字體和顏色
            let randomFront = self.fron[self.finde];
            let randomColor = self.colo[Math.round(Math.random()*(self.colo.length-1))];
            //字體下標增1
            self.finde = (self.finde+1) % self.fron.length;
            //向body中添加元素
            self.elBody.appendChild(ospan);
            //系結一個classname
            ospan.className = String(classname);
            //添加樣式
            ospan.style.cssText = cssText + "-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"
            ospan.style.color = randomColor;
            ospan.innerHTML = randomFront;
        }
        
        
        //監聽滑鼠點擊
        ClickFrontShow.prototype.listenMouse = function() {
            var self = this;

            //滑鼠點擊事件
            document.onclick = function(e) {
                //避免classname值重復導致出現bug
                if(self.cls === 20){
                    self.cls = 0;
                }else{
                    self.cls += 1;
                }
                //創建文字
                self.createFront(self.cls);
                let el = document.getElementsByClassName(self.cls)[0];
                
                //滑鼠點擊位置
                el.style.left = e.clientX + 'px';
                el.style.top = e.clientY + 'px';
                
                //過時改變
                setTimeout(function() {
                    el.style.opacity = 0;
                    el.style.top = el.offsetTop - 100 + 'px';
                }, 100);
                //過時清除
                setTimeout(function() {
                    self.elBody.removeChild(el);
                }, 2000);
            }
            
        }
        
        //實體化
        var frontShow = new ClickFrontShow();
        //用戶可在此傳遞引數，默認第一個引數是字體陣列；
        //第二個引數是顏色陣列，必須是陣列型別！
        frontShow.init();
    }
        
    </script>
    <style>
        p::selection{
            background:pink;
            color:#fff;
        }
    </style>
</head>
<body>
    <p style="margin:50px auto;width:600px;line-height:30px;">JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的編程語言，雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式和宣告式（如函式式編程）風格， [1] 
        JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成，因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript，但實際上它的語法風格與Self及Scheme較為接近， [2] 
        JavaScript的標準是ECMAScript ，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準，2015年6月17日，ECMA國際組織發布了ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES6， [1]</p>
</body>
</html>

效果圖

滑鼠cursor自定義圖片

首先自己做個png小圖，或者網上找一個

設定cursor: url(cursor.png),auto;

效果圖

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        
        window.onload = function() {
        //定義點擊出現文字類
        function ClickFrontShow() {
            //定義所需文字和顏色
            this.fron = ['高興', '開心', '?', '歡樂', '愉悅', '愉快', '快樂', '歡喜', '喜悅', '歡欣', '歡暢', '歡騰', '雀躍', '歡快'];
            this.colo = ['#FF69B4', '#ff6651', 'orange', '#FF00FF', '#00FF7F', '#00BFFF', '#BA55D3'];
            //獲取body元素
            this.elBody = document.getElementsByTagName("body")[0];
            //初始化randomNum
            this.randomNum = null;
            //初始化字體inde
            this.finde = 0;
            //初始化className
            this.cls = 0;
        }
        
        //定義初始化
        ClickFrontShow.prototype.init = function(frontArray, colorArray) {
            //自定義顏色和字體
            this.fron = frontArray || this.fron;
            this.colo = colorArray || this.colo;
            
            this.listenMouse();
        }
        
        //創建文字 
        ClickFrontShow.prototype.createFront = function (classname) {
            var self = this;
            let ospan = document.createElement('span');
            //設定樣式
            let cssText = "position:absolute; width: 40px; height: 20px; cursor: default; transform: translate(-50%,-50%); font-weight: bold; opacity: 1; z-index: 1000; transition: 1s;";
            //隨機字體和顏色
            let randomFront = self.fron[self.finde];
            let randomColor = self.colo[Math.round(Math.random()*(self.colo.length-1))];
            //字體下標增1
            self.finde = (self.finde+1) % self.fron.length;
            //向body中添加元素
            self.elBody.appendChild(ospan);
            //系結一個classname
            ospan.className = String(classname);
            //添加樣式
            ospan.style.cssText = cssText + "-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"
            ospan.style.color = randomColor;
            ospan.innerHTML = randomFront;
        }
        
        
        //監聽滑鼠點擊
        ClickFrontShow.prototype.listenMouse = function() {
            var self = this;

            //滑鼠點擊事件
            document.onclick = function(e) {
                //避免classname值重復導致出現bug
                if(self.cls === 20){
                    self.cls = 0;
                }else{
                    self.cls += 1;
                }
                //創建文字
                self.createFront(self.cls);
                let el = document.getElementsByClassName(self.cls)[0];
                
                //滑鼠點擊位置
                el.style.left = e.clientX + 'px';
                el.style.top = e.clientY + 'px';
                
                //過時改變
                setTimeout(function() {
                    el.style.opacity = 0;
                    el.style.top = el.offsetTop - 100 + 'px';
                }, 100);
                //過時清除
                setTimeout(function() {
                    self.elBody.removeChild(el);
                }, 2000);
            }
            
        }
        
        //實體化
        var frontShow = new ClickFrontShow();
        //用戶可在此傳遞引數，默認第一個引數是字體陣列；
        //第二個引數是顏色陣列，必須是陣列型別！
        frontShow.init();
    }
        
    </script>
    <style>
        p::selection{
            background:pink;
            color:#fff;
        }
        p{
            cursor: url(cursor.png),auto;
        }
    </style>
</head>
<body>
    <p style="margin:50px auto;width:600px;line-height:30px;">JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的編程語言，雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式和宣告式（如函式式編程）風格， [1] 
        JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成，因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript，但實際上它的語法風格與Self及Scheme較為接近， [2] 
        JavaScript的標準是ECMAScript ，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準，2015年6月17日，ECMA國際組織發布了ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES6， [1]</p>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/124761.html

標籤：JavaScript

上一篇：前端面試題解密：經典演算法之冒泡演算法（ES6版）及優化

下一篇：JavaScript中的建構式