![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript30挑战
文章平均质量分 79
wait......
这个作者很懒,什么都没留下…
展开
-
【javascript30】Day5------Fun with HTML5 canvas
效果图如下:最终的效果就是可以在页面上按照自己想要的线风格画图~那这个效果是怎么做出来的呢?首先,我们需要先了解一下canvas,可以参考下面这个博客:(6条消息) Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset…_DevOps海洋的渔夫@专栏-CSDN博客知道上面这些内容后,这个效果的实现就变得很简单了,因为canvas本身就可以供给我们作图,原创 2021-11-18 00:22:31 · 403 阅读 · 0 评论 -
【javascript30】Day3------CSS Variables
今天的效果图如下:在这个效果中,我们通过手动移动调节按钮来调整图片的边框宽度、模糊度以及边框颜色,话不多说,直接开始吧~首先,我们仍然将该效果分为CSS和JS两个部分,前者实现如下的静态页面,后者实现手动的动态调节。CSS部分我们首先来分析一下总体的布局:最上面的文字可以用h2来做中间的调节部分可以在一个div盒子放置三个input,前两个类型为range,第三个类型为color下面的图片放在一个div盒子中,设置其初始的边框等状态,然后调整其大小合适即可JS部分我们首先来分析我们原创 2021-11-09 23:14:33 · 370 阅读 · 0 评论 -
【javascript30】Day2------JS and CSS Clock
今天的效果图如下:这个效果是利用JS和CSS做了一个简单的时钟。 话不多说,我们直接开始吧~我们可以将实现的内容分为JS和CSS两部分,JS负责实现动态的指针转动的效果,CSS负责实现静态的时钟样式。CSS部分初始状态如下图:我们可以看到,我们需要画一个圆,并在其中嵌套指针盒子。其实很简单,首先将容器div盒子的border-radius设置为50%即可实现圆环的效果;然后在其中嵌套三个宽度为大盒子一半的指针小盒子,为其设置定位position:absolute以及top:50%,然后利用t原创 2021-11-08 23:40:31 · 422 阅读 · 0 评论 -
【javascript30】Day1------Drum kit
实现的效果如下:当按下键盘上对应字母时,产生不同的击鼓声音,相应盒子的样式发生改变。这个效果是JavaScript30天挑战的第一个小项目,具体项目可见如下官网:JavaScript30 挑战官网地址: javascript30.com/JavaScript30 挑战github源码地址: github.com/wesbos/Java…接下来,让我们了解一下这个效果是怎么做出来的吧~在我做的时候,我将它分成了css和js两个部分:css方面,我们需要一个大盒子装9个小盒子,原创 2021-11-01 23:51:33 · 375 阅读 · 0 评论