网页编程
关注
分享
扫一扫
Mr_ZhangSan
生存是一项技术，生活是一门艺术。
生活本就不易，既然选择了拼搏，就当用尽全力。
展开
-
如何不借用图片就实现好看的时钟
先看看效果图吧，如果喜欢这个效果再向下看吧，以免浪费各位的宝贵时间。效果图：下面介绍一下我的思路。其实很简单：1、利用border-radius这个展示圆角效果的属性做出三个长短和粗细均不相同的时钟指针。同时为了让三个指针的展示有里外的层次感，三个指针虽然均是使用的红色，但是红色的深浅不同，这样看起来就稍微有层次感，以免三个指针看起来融到一起去了。2、利用定时函数setInterval不断的绘制三个指针的角度，从而达到指针旋转的效果。当然，指针的旋转还得用到一个style属性transfor原创 2020-06-22 22:31:37 · 321 阅读 · 0 评论 -
原生js(JavaScript)实现图片轮播功能
先将目录结构图送上，然后再讲几个注意的地方。其中最为关键的方法就是使用setInterval(fun,time)这个方法。其中该方法有两个参数，第一个参数fun是你要实现的逻辑代码块。第二个参数time表示函数循环执行的周期，单位是毫秒。左边三个图片与右边三个图片相对应。后边第一处被标记的地方代表对三张图片做出的共同样式。代码整体逻辑就是先取得imageShow下面的所有li，然后根据...原创 2018-07-16 18:22:22 · 361 阅读 · 0 评论 -
原生js(JavaScript)实现手动切换图片效果
手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。代码：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g...原创 2018-07-17 11:51:19 · 2984 阅读 · 0 评论 -
广告区域的拖动功能
广告区域的拖动功能就是一块可以拖动的可以放置广告的地方。其中关键点在于鼠标的三个事件onmousedown，onmousemove和onmouseup。另外一个关键点在于获取鼠标按下时，鼠标离广告区域的边框的距离。依旧是先上效果图，再上解决思路，最后上源代码。效果图：初始进入页面的效果鼠标拖动后的效果解决思路：上面已经讲了关键的三个事件。然后就讲解实现这三个事件的思路。...原创 2018-07-23 17:40:20 · 288 阅读 · 0 评论 -
点击标题显示相应内容
点击标题显示相应内容的功能就是将页面分成上下两部分，其中上面部分全都是标题，可能会有多个标题。下面部分就是标题的内容部分，根据标题部分的选中情况展示对应标题的内容。因为本功能是静态页面，所以实现原理依然是控制页面的显示和隐藏。在实际应用中也会有这样的场景，但是如果应用场景是实时读取后台内容建议不要使用这种方式。同样的节奏，先上预览图，再上代码，然后对代码进行讲解。因为后面会对内容进行讲解，所以...原创 2018-07-18 13:05:28 · 9597 阅读 · 6 评论 -
原生JavaScript实现网页计时器
计时器的功能就是以秒为单位分别累加计时。其中提供了三个功能。计时：时间归零并开始计时；暂停：暂停当前计时器；继续：对暂停的计时器在当前时间上继续计时。时间格式是X时X分X秒。这次先提供预览图，然后讲解思路，代码放在后面。换换之前的步骤看看哪种效果好一点。下面提供效果图，逻辑思路以及代码。预览图：逻辑思路：对页面进行布局就不讲了。直接讲逻辑。1、首先定义了变量usedtime...原创 2018-07-18 17:47:53 · 1194 阅读 · 0 评论