原生JS实现动态时钟（优化）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <p id="num"></p> <a href="javascript:stop()">让时间停止吧</a> <a hr…

canvas :原生javascript编写动态时钟此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,width/2) 绘制表盘 function jiang(){ r = width/2 g.clearRect(0, 0, 600, 600); g.save(); g.translate(r, r); g.rotate(-Math.PI / 2); //分钟刻度线 for(var i = 0; i <…

原生JS实现动态折线图

原生JS实现动态折线图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>原生JS实现动态折线图</title> </head> <body> <canvas id="canvas"></canvas> <script> let N = new CreateMovin…

js+css3动态时钟-------Day66

昨天,有一天招,宽带到底没装上.相当恼火,不过包了一天租新房,有很多想法下来,其中,率先实现了--动态时钟(它已上载的资源,一些粗略的全貌.汗...) 这里记录.这个看似简单的功能,以达到良好的,我在的实施过程中遇到了哪些问题.代码,仅仅是依据自己现阶段的学习来做的,可能会有些麻烦.有些粗糙,可是终归是实现了这个效果,心里还是小开心了下. 先来张终于实现的效果图(静态图片); 首先准备素材,我从网上搜到了一个时钟的素材,谁让我的ps还菜的菜呢.然后我有了表盘.时针.分针和秒针.这样组成一个闹钟的…

原生js实现中文时钟

零.寒暄终于一个月可以更新两篇博客了,开心.昨天花了大概一天的时间玩了下github,基本的clone和push都搞定了,如果有和我一样的新手没调通的,大家可以交流. 另外,说个题外话,大家发现我的博客右上角多了一个“Fork me on GitHub”,瞬间B格提升了许多,哈哈.咋搞的,其实很简单,简要的说下: (1)进入github官方博客,链接在这里,手动链接:https://github.com/blog/273-github-ribbons,选择一个你喜欢的样式,比如我这个: 大家…

【原生JS】动态分页样式效果

效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr><td> <a href="#" class="btn">上一页</a> <a href="#" index="1">1</a> <a href="#&quo…

原生js之canvas时钟组件

canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 canvas元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. canvas标签只是图形容器,您必须使用脚本来绘制图形. 浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 和 Safari 支持那么本篇文章就通过一个时钟组件来熟悉使用一下关…

用js写动态时钟 2017-03-23

45每隔1秒变一次: 代码如下: <body onLoad="show()" > ------------表示当页面载入时执行该事件,可以没有 <div id="count1"> </div> <script> function show(){ var d=new Date(); var dy=d.getFullYear(); var dm=d.getMonth()+1; var dd=d.getDate(); …

原生JS制作验证码（优化）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> 请输入验证码:<input type="text" id="yzm"> <span id="yzm1" style="backg…

JS实现动态瀑布流及放大切换图片效果(js案例)

整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击图片放大.上下切换效果.HTML布局写的很简单,图片加载主要是在JS中通过访问自定义的JSON字符串来实现.动态瀑布流的原理简单理解就是把新需要加载的图片放在上一排总高度最小的图片或模块下面,实现参差不齐的多栏布局效果.具体效果如下: 做这个案例我用了之前自己封装的框架,所以小伙伴需要到我的另一篇文…