記得魔性的小蘋果和抖音嗎,作為前端的你,有想過讓頁面也 High 起來、舞動起來嗎?
??先看效果:
下面這段代碼可直接在控制臺執行,略長。可直接跳到本小節末,使用簡短 JS 引入的方式進行體驗(帶音樂效果喲)
setTimeout(letDance, 1000);
var bgmSrc =
'https://nd002723.github.io/carnival/audio/Martin%20Jensen%20-%20Fox%20(Loop%20Remix).mp3';
var cssHref = 'https://nd002723.github.io/carnival/css/high.css';
function letDance() {
function loadCss() {
//將css文件引入頁面
var myCss = document.createElement('link');
myCss.setAttribute('type', 'text/css');
myCss.setAttribute('rel', 'stylesheet');
myCss.setAttribute('href', cssHref); //css文件地址
myCss.setAttribute('class', l);
document.body.appendChild(myCss);
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t]);
}
}
function p() {
var e = document.createElement('div');
e.setAttribute('class', a);
document.body.appendChild(e);
setTimeout(function () {
document.body.removeChild(e);
}, 100);
}
function getSize(e) {
//獲取目標的寬高
return {
height: e.offsetHeight,
width: e.offsetWidth,
};
}
function checkSize(i) {
//判斷目標大小是否符合要求
var s = getSize(i); //獲取目標的寬高
return (
s.height > minHeight &&
s.height < maxHeight &&
s.width > minWidth &&
s.width < maxWidth
); //判斷目標是否符合條件
}
function m(e) {
var t = e;
var n = 0;
while (!!t) {
n += t.offsetTop;
t = t.offsetParent;
}
return n;
}
function g() {
var e = document.documentElement;
if (!!window.innerWidth) {
return window.innerHeight;
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight;
}
return 0;
}
function y() {
if (window.pageYOffset) {
return window.pageYOffset;
}
return Math.max(
document.documentElement.scrollTop,
document.body.scrollTop
);
}
function E(e) {
var t = m(e);
return t >= w && t <= b + w;
}
function setBgm() {
//設置音樂
var e = document.createElement('audio');
e.setAttribute('class', l);
e.src = bgmSrc; //bgm地址
e.loop = false;
e.addEventListener(
'canplay',
function () {
setTimeout(function () {
x(k);
}, 500);
setTimeout(function () {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e]);
}
}, 15500);
},
true
);
e.addEventListener(
'ended',
function () {
N();
h();
},
true
);
e.innerHTML =
' <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>';
document.body.appendChild(e);
e.play();
}
function x(e) {
e.className += ' ' + s + ' ' + o;
}
function T(e) {
e.className += ' ' + s + ' ' + u[Math.floor(Math.random() * u.length)];
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp('\\b' + s + '\\b');
for (var n = 0; n < e.length; ) {
e[n].className = e[n].className.replace(t, '');
}
}
var minHeight = 3; //最小高度
var minWidth = 3; //最小寬度
var maxHeight = 800; //最大高度
var maxWidth = 1400; //最大寬度
var s = 'mw-harlem_shake_me';
var o = 'im_first';
var u = ['im_drunk', 'im_baked', 'im_trippin', 'im_blown'];
var a = 'mw-strobe_light';
var l = 'mw_added_css'; //最終要移除的css
var b = g();
var w = y();
var C = document.getElementsByTagName('*');
var k = null;
for (var L = 0; L < C.length; L++) {
var targetDiv = C[L];
if (checkSize(targetDiv)) {
if (E(targetDiv)) {
k = targetDiv;
break;
}
}
}
if (targetDiv === null) {
//如果沒找到合適大小的
console.warn('沒能找到合適的大小. 換一個頁面試試?.');
return;
}
loadCss(); //將自定義css文件引入頁面
setBgm(); //添加背景音樂
var O = [];
for (var L = 0; L < C.length; L++) {
var targetDiv = C[L];
if (checkSize(targetDiv)) {
O.push(targetDiv);
}
}
//網頁整體傾斜效果(這塊兒本來是JQuery實現的,為了避免引入JQuery,做了改動。)
var style = document.createElement('style');
style.type = 'text/css';
try {
style.appendChild(
document.createTextNode(
'body{overflow-x:hidden;transform: rotate(1deg);-webkit-transform: rotate(1deg);-moz-transform: rotate(1deg);-o-transform: rotate(1deg);-ms-transform: rotate(1deg)}'
)
);
} catch (ex) {
style.styleSheet.cssText = 'body{background-color:red}'; //針對IE
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
??或者更簡潔一點,在頁面 URL 欄或者控制臺鍵入以下代碼直接體驗:
在瀏覽器地址欄黏貼以下內容的話,有三點需要注意,一是必須是已有內容的頁面;二是如果是通過復制黏貼代碼到瀏覽器地址欄的話,IE 及 Chrome會自動去掉代碼開頭的javascript:,所以需要手動添加起來才能正確執行,而 Firefox 中雖然不會自動去掉,但它根本就不支持在地址欄運行 JS 代碼;三是引用的carnival.js會依賴JQuery(沒有的話也沒事,只是頁面少了一個傾斜的效果)。
javascript: void (function () {
var d = document,
a = 'setAttribute',
s = d.createElement('script');
s[a]('tyle', 'text/javascript');
s[a]('src', 'https://nd002723.github.io/carnival/js/carnival.js');
d.head.appendChild(s);
})();
1. href 是指向網絡資源所在位置, 建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接, 用于超鏈接 。
2. src 是指向外部資源的位置, 指向的內容將會嵌入到文檔中當前標簽所在位置;
1. 在請求 src 資源時會將其指向的資源下載并應用到文檔內,
2. 例如 js 腳本, img 圖片和 iframe 等元素 。
3. 當瀏覽器解析到該元素時, 會暫停其他資源的下載和處理, 直到將該資源 加載、編譯、執行 完畢;
4. 圖片和框架等元素也如此, 類似于將所指向資源嵌入當前標簽內 。 這也是為什么將 js 腳本放在底部而不是頭部 。
之前有整理過部分知識點, 現在將整理的相關內容, 驗證之后慢慢分享給大家; 這個專題是 "前端面試題" 的相關專欄; 大概會有200+的文章。
如果對大家有所幫助,可以點個關注、點個贊; 文章會持續打磨 。
有什么想要了解的前端知識, 可以在評論區留言, 會及時分享所相關內容 。
習html的新手,可能都會被這兩個弄暈了,甚至很多學習工作了幾年的朋友,也會一時弄不清楚該用哪個。現在就簡單和大家一起說說。
對于html新手,可能一下子無法接受很多相關知識,那我們就簡單的把它總結一下,先記下來就行,不要一下子去究根揭底的,以后學的知識越來越多了,再去追究,就很容易明白了。先說一下src,src在html中其實是英語單詞source的縮寫,意思是來源,根源,在html這里可以理解為源文件(文件的來源,文件的地址)。再來說一下href,href其實是hypertext reference的縮寫,中文意思是超文本引用,這個大家先不要去追究它中文意思了,不然對于新手來說很容易混淆,更弄不清哪個是哪個。
重點在這里了,哪里用src,哪里用href。對于新手,大家記住下面兩句就行:第一,link標簽中的樣式表引入和a標簽中的超鏈接這兩個用href。第二,img標簽的圖片地址和script標簽的腳本文件加載還有iframe標簽的頁面加載這三個用src。記住這兩點就行了。
更簡單點,就直接來個對應。
src——>img標簽,script標簽,iframe標簽;
href——>link標簽,a標簽;
老借口....................逃寶
學習html的新手,記住這兩個對應,后面用到時就不會弄亂了。晚上就寫到這里了,當然如果大家有更好的,能夠讓大家更好更快理解并且不弄亂的方法或者解釋,希望可以關注留言一下,一起討論哦。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。