200行Html5+CSS3+JS代码实现动态圣诞树

最新推荐文章于 2024-09-30 23:36:44 发布

2401_86358943

最新推荐文章于 2024-09-30 23:36:44 发布

阅读量1k

点赞数 27

文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/2401_86358943/article/details/142176376

版权

4.添加额外功能

修改背景：

Css代码的第39到43行，可以更改不同的背景颜色或者背景图片，鼠标放在红色的框上面会出现，上图所示的一个颜色选择，拉动就可以选择不同的颜色背景

添加音乐：

在index.html代码中的第23行添加下列代码：

src=“音乐地址”，把想要播放的音乐，提前放到这个文件夹中，把这个音乐的命名填入src中就可以播放音乐

hidden="true"表示隐藏音乐播放按钮，hidden="false"开启音乐播放按钮

autostart=“true” 打开网页加载完后自动播放

loop="true"循环播放如仅想播放一次则为：loop=“false”

修改卡片上的内容：

圣诞树上面的卡片是由不同的类型的，有的卡片可以下拉查看下面的内容

圣诞树上面的卡片是可以修改内容的，在JS代码的第五行的const greetings = [ ]修改，把里面的内容换成你想要的就行，如果叶子不够，在后面还可以加入。

四、编码实现

CSS代码：

/*********************************************

RESET

*********************************************/

html{color:#000;background:#222222;}

a{cursor:pointer;}

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}

li{list-style:none;}

caption,th{text-align:left;}

/* h1,h2,h3,h4,h5,h6{font-size:100%;} */

q:before,q:after{content:‘’;}

abbr,acronym {border:0;font-variant:normal;}

sup {vertical-align:text-top;}

sub {vertical-align:text-bottom;}

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}

legend{color:#000;}

a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}

/input[type=“Submit”]{cursor:pointer;}/

strong {font-weight: bold;}

/*********************************************

GLOBAL

*********************************************/

body, html {

overflow: hidden;

font-family: Helvetica, Arial, sans-serif;

color: #fff;

font-size: 11px;

width: 100%;

height: 100%;

background: #b72424;

background: -moz-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b72424), color-stop(100%,#492727));

background: -webkit-radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);

background: radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);

}

@keyframes spin {

0% { transform: rotateY( 0deg ); }

100% { transform: rotateY( 360deg ); }

}

body {

perspective: 3000px;

perspective-origin: 0 20%;

}

.tree {

margin: 0 auto;

position: relative;

animation: spin 18s infinite linear;

transform-origin: 50% 0;

transform-style: preserve-3d;

}

.tree * {

position: absolute;

transform-origin: 0 0;

}

Html代码：

DOM Tree

知心宝贝

文章代码参考@hakimel

JS代码：

const width = 500;

const height = 600;

const quantity = 150;

const types = [ ‘text’, ‘select’, ‘progress’, ‘meter’, ‘button’, ‘radio’, ‘checkbox’ ];

const greetings = [ ‘知心宝贝’,‘知心宝贝’,‘Merry Christmas’,‘Merry Christmas’,‘Merry Christmas’,‘Merry Christmas’,‘知心宝贝’,‘12月25’,‘知心宝贝’,‘Merry Christmas’,‘Happy Holidays’, ’ 知心宝贝’,‘12月25’,‘知心宝贝’,‘Merry Christmas’,‘知心宝贝’,‘Merry Christmas’,‘知心宝贝’ ];

let tree = document.querySelector( ‘.tree’ ),

treeRotation = 0;

tree.style.width = width + ‘px’;

tree.style.height = height + ‘px’;

window.addEventListener( ‘resize’, resize, false );

// The tree

for( var i = 0; i < quantity; i++ ) {

let element = null,

type = types[ Math.floor( Math.random() * types.length ) ],

greeting = greetings[ Math.floor( Math.random() * greetings.length ) ];

let x = width/2,

y = Math.round( Math.random() * height );

let rx = 0,

ry = Math.random() * 360,

rz = -Math.random() * 15;

let elemenWidth = 5 + ( ( y / height ) * width / 2 ),

elemenHeight = 26;

switch( type ) {

case ‘button’:

element = document.createElement( ‘button’ );

element.textContent = greeting;

element.style.width = elemenWidth + ‘px’;

element.style.height = elemenHeight + ‘px’;

break;

case ‘progress’:

element = document.createElement( ‘progress’ );

element.style.width = elemenWidth + ‘px’;

element.style.height = elemenHeight + ‘px’;

if( Math.random() > 0.5 ) {

element.setAttribute( ‘max’, ‘100’ );

element.setAttribute( ‘value’, Math.round( Math.random() * 100 ) );

}

break;

case ‘select’:

element = document.createElement( ‘select’ );

element.setAttribute( ‘selected’, greeting );

element.innerHTML = ‘’ + greetings.join( ‘’ ) + ‘’;

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？