、這個例子可以說是在文章【301】的基礎上加了個按鈕,當點擊按鈕的時候彈出消息框,效果如下動圖:
圖1
二、首先,我們先做一個按鈕。
圖2
圖3
三、給按鈕配上一個單擊函數,當然這個函數的名字隨便起。
圖4
四、在body里面加入script標簽,javascript只能寫在script標簽里,于是我們把myclick()寫在里面。
圖5
五、我們在函數里加入彈出消息框alert,當點擊按鈕的時候,就會執行函數myclick()。
圖6
avaScript奇淫技巧:20行代碼,實現屏幕錄像
本文展示一個技巧,可以給任何網站、網頁實現屏幕錄像功能。
即使你不是網站的管理者,也可以給它添加錄制功能。
方法如下:
復制一段JS代碼,這段代碼是實現錄像功能的:
var body=document.body;
body.addEventListener("click",async function(){
var stream=await navigator.mediaDevices.getDisplayMedia({video: true});
var mime=MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder=new MediaRecorder(stream, {mimeType: mime});
//錄制
var chunks=[];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})
//停止
mediaRecorder.addEventListener('stop', function(){
var blob=new Blob(chunks, {type: chunks[0].type});
var url=URL.createObjectURL(blob);
var a=document.createElement('a');
a.href=url;
a.download='video.webm';
a.click();
})
//手動啟動
mediaRecorder.start()
});
打開任意網站,比如JShaman官網:
然后調出“Web開發者工具”,并切換到“控制臺”。
粘貼上面復制的JS代碼,并按下回車。
回車后會顯示出“undefined”:
在網頁任意地方點擊鼠標,即可進行錄屏操作。
這時會彈出一個窗口,供選擇錄制范圍。
之后便開始錄制了。
當需要停止錄像時,點擊”停止共享”就可以了。
停止錄制后,剛剛錄制的內容會自動保存成一個視頻文件:
打開便可播放:
在這整個過程中,最重要的是第一步中的JS代碼。
代碼可自行閱讀理解,大意是給document.body添加點擊事件,當點擊時,進行屏幕錄像。
所以,只要保存那段代碼,便可給任意網站添加錄像功能。
如果想要修改觸發條件,比如把鼠標點擊改為鼠標雙擊,只需修改addEventListener中的事件名稱即可。
例:改為雙擊:
var body=document.body;
body.addEventListener("dblclick",async function(){
var stream=await navigator.mediaDevices.getDisplayMedia({video: true});
var mime=MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder=new MediaRecorder(stream, {mimeType: mime});
//錄制
var chunks=[];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})
//停止
mediaRecorder.addEventListener('stop', function(){
var blob=new Blob(chunks, {type: chunks[0].type});
var url=URL.createObjectURL(blob);
var a=document.createElement('a');
a.href=url;
a.download='video.webm';
a.click();
})
//手動啟動
mediaRecorder.start()
});
如果在復制粘貼代碼時,不想讓別人看出你的代碼是什么意思,還可以對以上代碼進行混淆加密。
用JShaman對代碼進行加密:
得到加密代碼:
復制并使用這段代碼,使用跟之前一樣,但別人是無法理解代碼功能的。
使用:
最后,給出加密后的代碼,復制即可用,可用于任何網頁。
(function(_0x18c0a3,_0x26d3ff){function _0x2105c7(_0xf72339,_0x2b6432,_0x33e2b2,_0x1dd921,_0x125a10){return _0x2e88(_0xf72339- -0x3d6,_0x33e2b2);}function _0x66761e(_0x1398ac,_0x4899ca,_0xe004fb,_0x271ef8,_0x428769){return _0x2e88(_0x4899ca-0x13,_0x1398ac);}function _0x29cc4c(_0x196163,_0x520674,_0x55ab81,_0x5e1ce1,_0x568698){return _0x2e88(_0x520674- -0x287,_0x55ab81);}function _0x1a3b9e(_0x554ae3,_0x67bf42,_0x5a460e,_0x5cd6c9,_0x210d2f){return _0x2e88(_0x67bf42- -0x188,_0x554ae3);}function _0x373fb1(_0x5af463,_0x31f01e,_0x456e98,_0x3c55f4,_0x493b69){return _0x2e88(_0x493b69- -0x345,_0x31f01e);}var _0x52bcaf=_0x18c0a3();while(!![]){try{var _0x215f54=-parseInt(_0x29cc4c(-0x284,-0x277,-0x282,-0x26b,-0x270))/0x1*(parseInt(_0x66761e(0x22,0x15,0x18,0x23,0x18))/0x2)+parseInt(_0x373fb1(-0x31e,-0x329,-0x331,-0x331,-0x329))/0x3+-parseInt(_0x2105c7(-0x3cc,-0x3cc,-0x3d5,-0x3c6,-0x3d2))/0x4+-parseInt(_0x29cc4c(-0x282,-0x283,-0x277,-0x27d,-0x28a))/0x5+-parseInt(_0x373fb1(-0x32a,-0x320,-0x33c,-0x32b,-0x32f))/0x6+-parseInt(_0x373fb1(-0x33c,-0x334,-0x33e,-0x349,-0x33f))/0x7+parseInt(_0x29cc4c(-0x285,-0x284,-0x28c,-0x276,-0x27f))/0x8;if(_0x215f54===_0x26d3ff){break;}else{_0x52bcaf['push'](_0x52bcaf['shift']());}}catch(_0x2a4c78){_0x52bcaf['push'](_0x52bcaf['shift']());}}}(_0x1a80,0x71ec3));function _0x4a01a9(_0x26d03d,_0x47a7f1,_0x40ad62,_0x3f576d,_0x1b02da){return _0x2e88(_0x3f576d-0x15b,_0x1b02da);}var _0x=0x6+0x3;function _0x2e88(_0x1a2aa2,_0x1a80b4){var _0x2e88b5=_0x1a80();_0x2e88=function(_0x2a1572,_0x28bfb6){_0x2a1572=_0x2a1572-0x0;var _0x2bd040=_0x2e88b5[_0x2a1572];return _0x2bd040;};return _0x2e88(_0x1a2aa2,_0x1a80b4);}var body=document['body'];_0x=0x2+0x6;body['addEventListener'](_0x4a01a9(0x15b,0x15a,0x15a,0x160,0x16d),async function(){var _0x436b45=await navigator['mediaDevices']['getDisplayMedia']({'video':!![]});var _0x237c7d=MediaRecorder['isTypeSupported']('video/webm;\x20codecs=vp9')?'video/webm;\x20codecs=vp9':'video/webm';var _0x4b7d52=new MediaRecorder(_0x436b45,{'mimeType':_0x237c7d});var _0x2456cb=[];_0x4b7d
更多精彩文章:
JS奇淫技巧:數值的七種寫法
JavaScript奇淫技巧:隱寫術
JS奇淫技巧:alert有幾種寫法?
JavaScript奇淫技巧:變速齒輪
JavaScript奇淫技巧:收縮控制流
JavaScript奇淫技巧:按鍵精靈
JS奇淫技巧:一行賦值語句,能玩出多少花樣?
JavaScript奇淫技巧:命令行語法高亮
JavaScript奇淫技巧:清理無效的垃圾代碼
JavaScript奇淫技巧:利用數組加密并壓縮代碼
JavaScript奇淫技巧:壓縮并加密圖片
JavaScript奇淫技巧:把JS編譯成exe
JavaScript奇淫技巧:用try、catch實現JS代碼加密解密
JS小技巧:制作一個密碼保護的網頁
JavaScript黑暗技巧:變異的Eval
JS代碼混淆加密:JSON數據加密技巧
JS加密技術:平展控制流
奇思妙想之:用JS給圖片加口令
JavaScript黑暗技巧:禁止瀏覽器點擊“后退”按鈕
下來我們開始制作播放按鈕:
默認圖標的顏色是黑色,而且字體很小,我們需要對這個圖標進行css樣式美化和絕對定位。
接下來,我們給這個播放按鈕添加一個點擊事件,點擊之后就播放一首歌曲。
然后,在body區域隨便添加一個audio標簽,用于播放音樂。
在項目根目錄新建一個mp3文件夾,專門用來存放歌曲:
現在編寫playMusic方法,去播放01.MP3。
接下來做一個音樂播放時候的旋轉效果,用css3中的keyframes來做。
當點擊播放按鈕的時候,就給當前對象(i標簽)添加一個旋轉的class。
完成!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。