Сейчас Рождество, поэтому вы можете создать рождественскую елку в формате HTML и подарить ее своим друзьям. Новички, не имеющие опыта программирования, также могут следовать инструкциям и запускать код.
1. Откройте vscoede и создайте новый текстовый файл.
2. Затем скопируйте в него следующий код
<html>
<голова>
<title>Рождественская елка</title>
<мета-кодировка="utf-8" >
<стиль>
HTML, тело {ширина: 100%; высота: 100%; отступ: 0;
div {маржа: 0; заполнение: 0; граница: 0;
.nav {
позиция: абсолютная;
верх: 0;
слева: 0;
ширина: 100%;
высота: 27 пикселей;
цвет фона: белый;
цвет: черный;
выравнивание текста: по центру;
высота строки: 25 пикселей;
}
a { цвет: черный; украшение текста: нет; граница внизу: 1 пиксель, пунктирный черный }
a:hover { border-bottom: 1px сплошной красный };
.previous { float: слева; маржа слева: 10 пикселей;
.next { float: вправо; поле вправо: 10 пикселей };
.green { цвет: зеленый }
.red { цвет: красный }
textarea {ширина: 100%; высота: 100%; граница: 0; поле: 0; отступ: 20 пикселей;
.block-outer { float: left; ширина: 22%; высота: 100%; отступ: 5 пикселей; граница слева: 1 пиксель, сплошной черный; поле: 30 пикселей 3 пикселя 3 пикселя;
.block-inner { высота: 68% };
.one { граница: 0 }
</стиль>
</голова>
<body Marginwidth="0" MarginHeight="0">
<canvas id="c" height="356" width="446">
<скрипт>
вар рухнул = правда;
переключатель функции() {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('frame');
если (свернуто) {
fs.rows = '250px,*';
fs.noResize = ложь;
е[0].noResize = ложь;
е[1].noResize = ложь;
} еще {
fs.rows = '30px,*';
fs.noResize = правда;
е[0].noResize = правда;
е[1].noResize = правда;
}
свернутый = !свернутый;
}
</скрипт>
<скрипт>
вар б = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</скрипт>
<скрипт>
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200 ;)with(M[k]=k?c.c loneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='60px Impact',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2? 128+И:0)+', '+I+',.5)':'#cca',i<7;)beginPath(fill(arc(Ui/3,24-i/2,k==13?4-(i++)/2:8 -i++,0,M.PI*2,1)));иначе for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(Dx/.9-1.5*y+1),R=67* (B+1)*(L=k/9+.8)>>1,i++<W;)if( D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,lineTo(U+x* U,U+y*U),stroke();for(y=H=k+E(k++)*25,R=Q()*W;P=3,j<H;)J[O++]= [x+=T(R)*P+Q()*6-3,y+=Q( )*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9 )*4:0)>>1]}setInterval(функция G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D) ;a.clearRect(0,0,W ,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2 ]*Т(Д)>>0 ,L[1]>>1)){if(i==2e3)a.fillText('Счастливого Рождества!',U,345);if(!(i%7))a.drawImage(M[13 ] , ((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99 ))>>0);}D+=.02},1)
</скрипт>
</тело>
</html>3. Выберите сочетание клавиш Ctrl+S для сохранения (предыдущее имя можно изменить по желанию, но суффикс html менять не следует).
4. Запустите здесь, чтобы начать отладку, выберите для запуска любой браузер (у меня Chrome, поэтому для запуска я выбираю Google Chrome)
5. Эффект операции
1. Создайте новый текстовый файл на рабочем столе.
2. Скопируйте в него следующий код
<html>
<голова>
<title>Рождественская елка</title>
<мета-кодировка="utf-8" >
<стиль>
HTML, тело {ширина: 100%; высота: 100%; отступ: 0;
div {маржа: 0; заполнение: 0; граница: 0;
.nav {
позиция: абсолютная;
верх: 0;
слева: 0;
ширина: 100%;
высота: 27 пикселей;
цвет фона: белый;
цвет: черный;
выравнивание текста: по центру;
высота строки: 25 пикселей;
}
a { цвет: черный; украшение текста: нет; граница внизу: 1 пиксель, пунктирный черный }
a:hover { border-bottom: 1px сплошной красный };
.previous { float: слева; поле слева: 10 пикселей;
.next { float: вправо; поле вправо: 10 пикселей };
.green { цвет: зеленый }
.red { цвет: красный }
textarea {ширина: 100%; высота: 100%; граница: 0; поле: 0; отступ: 20 пикселей;
.block-outer { float: left; ширина: 22%; высота: 100%; отступ: 5 пикселей; граница слева: 1 пиксель, сплошной черный; поле: 30 пикселей 3 пикселя 3 пикселя;
.block-inner { высота: 68% };
.one { граница: 0 }
</стиль>
</голова>
<body Marginwidth="0" MarginHeight="0">
<canvas id="c" height="356" width="446">
<скрипт>
вар рухнул = правда;
переключатель функции() {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('frame');
если (свернуто) {
fs.rows = '250px,*';
fs.noResize = ложь;
е[0].noResize = ложь;
е[1].noResize = ложь;
} еще {
fs.rows = '30px,*';
fs.noResize = правда;
е[0].noResize = правда;
е[1].noResize = правда;
}
свернутый = !свернутый;
}
</скрипт>
<скрипт>
вар б = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</скрипт>
<скрипт>
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200 ;)with(M[k]=k?c.c loneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='60px Impact',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2? 128+И:0)+', '+I+',.5)':'#cca',i<7;)beginPath(fill(arc(Ui/3,24-i/2,k==13?4-(i++)/2:8 -i++,0,M.PI*2,1)));иначе for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(Dx/.9-1.5*y+1),R=67* (B+1)*(L=k/9+.8)>>1,i++<W;)if( D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,lineTo(U+x* U,U+y*U),stroke();for(y=H=k+E(k++)*25,R=Q()*W;P=3,j<H;)J[O++]= [x+=T(R)*P+Q()*6-3,y+=Q( )*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9 )*4:0)>>1]}setInterval(функция G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D) ;a.clearRect(0,0,W ,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2 ]*Т(Д)>>0 ,L[1]>>1)){if(i==2e3)a.fillText('Счастливого Рождества!',U,345);if(!(i%7))a.drawImage(M[13 ] , ((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99 ))>>0);}D+=.02},1)
</скрипт>
</тело>
</html>3. После копирования нажмите Файл ---- Сохранить как.
4. Измените имя файла на любое, суффикс должен быть html.
Просто выберите все файлы в качестве типа сохранения или, если есть тип html, просто выберите тип html.
5. Это рендеринг после сохранения.
6. Дважды щелкните, чтобы открыть и просмотреть эффект бега.
На этом завершается статья о создании рождественской елки в формате HTML. Для получения дополнительной информации о создании рождественской елки в формате HTML найдите предыдущие статьи на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы поддержите меня в будущем. даункоды.com!