在互聯網發展的今天,Javascript作為一門前端開發語言越來越受到關注。除了其作為一個重要的前端開發工具之外,Javascript還有很多好玩的代碼可以實現。下面就來分享一下一些有趣而好玩的Javascript代碼。
首先,我們可以通過Javascript實現一些比較復雜的動畫效果。比如說,當我們鼠標移動到網頁中的一張圖片上時,會出現一個光暈效果,隨著鼠標的移動而跟隨不斷變化。這個效果可以通過以下代碼實現:
var halo = document.createElement('div'), theImg = document.getElementsByTagName('img')[0], pos = {x:0, y:0}, timer = null; halo.style.position = 'absolute'; halo.style.width = halo.style.height = '80px'; halo.style.borderRadius = '50%'; halo.style.backgroundColor = 'rgba(244,67,54,.8)'; halo.style.transform = 'scale(0)'; document.body.appendChild(halo); theImg.addEventListener('mousemove', function(e){ var mx = e.pageX - this.offsetLeft, my = e.pageY - this.offsetTop; pos = {x:mx-40, y:my-40}; clearInterval(timer); halo.style.transform = 'translate('+pos.x+'px, '+pos.y+'px) scale(1)'; }, false);
這個代碼通過創建一個div元素并添加到頁面中,然后監聽鼠標移動事件,即可在移動到圖片上時出現這個光暈效果。
接下來,我們可以看看如何使用Javascript實現頁面背景隨鼠標移動而不斷變化的效果。代碼如下:
document.addEventListener('mousemove',function(e){ var x = e.clientX, y = e.clientY, w = window.innerWidth, h = window.innerHeight, r = Math.round(x/w*255), g = Math.round(y/h*255), b = Math.round((x+y)/(w+h)*255), bgColor = 'rgba('+r+','+g+','+b+',.8)'; document.body.style.backgroundColor = bgColor; });
這個代碼通過監聽鼠標移動事件,計算出當前鼠標位置所占的窗口大小比例,并根據比例來動態計算背景顏色,從而實現了頁面背景隨鼠標移動而不斷變化的效果。
最后,我們來看一個比較有趣的Javascript代碼實現。以下代碼可以讓你在瀏覽器控制臺中輸出一個彩色的小恐龍:
console.log('%c ▄??█??█▄ ', 'background-color:#019875;color:#fff'); console.log('%c▄█ █ █? ?█', 'background-color:#02C39A;color:#fff'); console.log('%c█??? ??█?? █▄█ ', 'background-color:#F7C59F;color:#fff'); console.log('%c█ █ █ █ ', 'background-color:#F2994A;color:#fff'); console.log('%c ??? ? █ █ ', 'background-color:#F26D21;color:#fff'); console.log('%c ??? ', 'background-color:#CCC6C2;color:#fff');
這個代碼實現了在瀏覽器控制臺中輸出一個彩色的小恐龍,可以讓我們在平淡無味的編程生活中增加一些樂趣。
以上就是一些有趣而好玩的Javascript代碼,它們不僅能夠增加我們的編程樂趣,還可以鍛煉我們的編程技巧。希望通過這些實例,能夠激發大家對Javascript的興趣,愿大家在編程的路上一直保持好奇心和探索精神。