JavaScript “跑马灯”抽奖活动代码解析与优化(一)
转载:http://blog.csdn.net/yisuowushinian/article/details/50623917
最近的项目中做了一个“跑马灯”的抽奖特效插件。上篇文章已经分享过html
和css
的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在写这篇文章的时候,也顺便把自己的代码重构了一下。
这里主要是来写写自己的优化过程。俗话说:
一个程序猿的进步是从对自己的代码不满意开始的。
开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的:
1.移动端1px像素线的问题
对于设计师给我的手机端网页的设计稿都是2倍图。按照道理来说,在写网页的时候,所有对象的实际尺寸都是会除2。但是对于1像素的线呢?
先来看两张图,设计稿的效果:
在三星 S4下的实际显示效果:
可以看到这个时候1px的线竟然显示不出来了。这个问题是跟 S4手机的屏幕像素密度有关。关于屏幕像素密度和1px 线的关系有很多文章介绍,可以自行搜索了解。我这里的解决方案是,对1px 的线不做处理。是多少就写多少。就算我的基础单位是rem
,也不是其它单位。
<code class="language-css hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> absolute</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">13</span>rem</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">9.2</span>rem</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">1</span>px solid <span class="hljs-hexcolor" style="box-sizing: border-box;">#000</span></span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
2.pc 端浏览器和移动端浏览器容错率的差异
先来看一段代码:
<code class="language-javascript hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'[node-type=row-a'</span>).find(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'div'</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
很明显可以发现,我使用的选择器是有语法错误的。但是在浏览器中运行会有什么结果呢?看下图:
很明显可以看出对于属性选择器,就算我有语法错误,PC 端浏览器也是可以正确解析的。但是在手机端,这种写法是不能够正确解析,代码不能够运行。
所以写代码的时候一定要注意一些小细节哈。。。
3.jQuery中选择器的使用
在使用 jQuery 或者是 Zepto 的过程中最经常使用的选择器的写法就是下面这样吧,
<code class="language-javascript hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'div.testClass'</span>)</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
只是在$()
中写上自己需要的 Dom 节点的 class或者 ID 或 者使用属性选择器。
在查看 jQuery的文档,对于$()
会有这样的描述:
<code class="hljs erlang has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-title" style="box-sizing: border-box;">jQuery</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">([selector,[context]])</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
最重要的是看看对 context
(它也是我们平时使用中最容易忽略,但是却非常有用的一个参数)的描述:
默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。在jQuery 1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。
刚开始学习 JavaScript 那会儿,就听说了操作 DOM 是很损耗浏览器性能,遍历 DOM 也是很影响程序性能的。
如果我们在指定的范围内查找需要的 Dom 会不会比从整个document
中查找快很多。而且在我们写 web 组件的过程中,一个页面上组件可能出现很多次,那我们怎么判断我们要操作哪个组件呢?这个context
参数就会起到决定行的作用。具体请继续看哇。。。
4.jQuery对象到数组的转换
刚开始学习 jQuery的时候在一本书上看到一句话:
jQuery对象就是一个 JavaScript 数组。
而且在使用 jQuery的过程中,都会遇到,js对象转 jQuery对象,jQuery对象转 js对象。关于这些基础不做过多介绍。
但是有时候我们会想在 jQuery对象上运用一些原生Array
对象的方法或者属性。来看一个简单的例子:
由图中的代码运行结果,可以知道在 jQuery对象上是没有我们要使用reverse
方法的。尽管test
是一个数组。
那么我们怎么办才可以让 jQuery对象使用原生的 Array
对象的方法呢?
4.1使用原型链扩展
比如下面的代码:
<code class="language-javascript hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">jQuery.prototype.reverse=<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//一些操作</span> }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
使用prototype
来扩展方法的时候,大家一直比较认为是缺点的就是可能会污染已经存在的原型链上的方法。还有就是访问方法的时候需要查找原型链。
4.2将 jQuery对象中的对象添加到数组中
看下面的代码
<code class="language-javascript hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> test = $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'div.test'</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> a=[]; $(test).each(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>a.push($(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>)); });a.reverse();</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
这样就可以将 jQuery对象翻转。
4.3使用 Array对象的 from()方法
这种方法也是自己在编写插件过程中使用的方法。看一下文档描述:
Array.from() 方法可以将一个类数组对象或可迭代对象转换成真实的数组。
个人感觉使用这个代码比较简洁。暂时还不知道有没有性能的影响。继续看下面的代码:
<code class="hljs oxygene has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> test = $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'div.test'</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> a= <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">from</span>(test); a.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">reverse</span>();</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
5.setInterval()和setTimeout()对程序性能的影响
因为setTimeout()
和setInterval()
这两个函数在 JavaScript 中的实现机制完全一样,这里只拿 setTimeout()
验证
那么来看两段代码
<code class="language-javascript hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> a ={test:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>setTimeout(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.bbb,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>);},bbb:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'----'</span>);} }; a.test()</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
输出结果如下:
看下面的代码输出是什么
<code class="language-javascript hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> a ={test:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>setTimeout(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>console.log(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.bbb();},<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>);},bbb:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'----'</span>);} }; a.test();</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
运行这段代码的时候,代码报错
由以上的结果可以知道,当我们在使用setInterval()
和setTimeout()
的时候,在回掉中使用this
的时候,this
的作用域已经发生了改变,并且指向了window
。
setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在”任务队列”的尾部添加一个事件,因此要等到同步任务和”任务队列”现有的事件都处理完,才会得到执行。
意思就是说在我们设置 setTimeout()之后,也可能不是立即等待多少秒之后就立即执行回掉,而是会等待主线程的任务都处理完后再执行,所以存在 “等待”超过自己设置时间的现象。同时也会存在异步队列中已经存在了其它的 setTimeout() 也是会等待之前的都执行完再执行当前的。
定时器对队列的工作方式是,当特定的时间过去后将代码插入(执行队列)。
看一个 Demo:
<code class="language-javascript hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//当 JavaScript 线程空闲后等待4秒将 `bbb()`加入执行队列</span> setTimeout(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">bbb</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'bbb'</span>); },<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4000</span>);<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">aaa</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//当 JavaScript 线程空闲后等待1秒将 `bbb()`加入执行队列</span>setTimeout(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">ccc</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ccc'</span>);},<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>); }aaa();</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>
如果运行上面的代码,当执行完 aaa()
,JavaScript 线程空闲,这时开始计时:等待1秒后将 ccc()
加入执行队列,等待4s 将 bbb()
加入执行队列。这时从 ccc()
加入执行队列到 bbb()
加入执行队列中间时间间隔是3s。
执行结果如下图:
JavaScript “跑马灯”抽奖活动代码解析与优化(一)相关推荐
- php 跑马灯抽奖,JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)_javascript技巧...
最近做了个项目,其中有项目需求是要实现跑马灯抽奖效果,实现此功能主要用到js相关知识,废话不多说,感兴趣的朋友可以阅读下全文. 开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要 ...
- html文本框中加入跑马灯,js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如 ...
- 网站顶部的跑马灯特效代码
跑马灯的方法很多,其中最简单的是采用一句Html代码来实现 放置说明 放在头部head里即可 代码 <style> #top-grrk{ background:url(https://ex ...
- java公告栏js资源_javascript公告栏跑马灯效果代码
51前端 ul{ list-style:none; margin:0px; padding:0px; width:1500px; float:left; } ul li{ height:25px; l ...
- 微信小程序实现跑马灯效果(完整代码)
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码: <!--跑马灯 Linyufan.com--> < ...
- proteus跑马灯仿真_不花费一分钱,实现跑马灯编程实验
建立仿真工程 初学者学习单片机编程,并不需要去网上买个开发板才能开始编程做实验,若是想先了解,可以先用proteus仿真软件来做实验,Protues软件具有其它EDA工具软件的功能.这些功能是: 1. ...
- 单片机入门学习五 STM32单片机学习二 跑马灯程序衍生出的stm32编程基础
上篇文章 单片机入门学习四 STM32单片机学习一 跑马灯程序和创建工程 仅介绍了入门程序及其编译运行过程,下面开始对stm32的一些基础知识做一个记录. 1.stm32f103zet6(上篇问题3 ...
- 微信小程序实现跑马灯效果(自定义组件详解)
首先看一下效果吧 首先我们在项目根目录建一个公共文件夹,这里我命名为components 在components里面创建一个组件, dt-horse-race-lamp > index 最后 ...
- 基于8255A接口芯片的跑马灯程序
目前这段时间,微机原理这门课上到了接口部分:开始接触到基于接口芯片的汇编编程,这个星期五上机实验完成后.考虑了一下老师说的跑马灯程序,感觉逻辑上实现不是很复杂 于是去实现了一下,但是没跑起来:于是最后 ...
最新文章
- 华为鸿蒙系统四大特性:基于微内核,面向全场景,分布式架构
- 如何定位cpu占用率高的java线程
- 20+顶尖高校同时开打《王者荣耀》!实际上是一场科研battle,你能信?
- java semaphore 等待_Java并发编程系列之Semaphore详解
- Java面试——Redis系列总结
- 错误记录(四)java.lang.IllegalArgumentException: Control character in cookie value or attribute.
- 从红芯造假事件,看国产软件的两难困境 | 畅言
- 【转】Oracle当中扫描数据的方法
- bzoj 1045: [HAOI2008]糖果传递
- 2月20日 阻尼牛顿法,拟牛顿法(Quasi-Newton Methods)及各种具体实现方法,共轭梯度法(Conjugate Gradient)
- linux挂载ipsan存储,centos系统ISCSI挂载IPSAN存储
- python爬虫源码大全_python爬虫(附源码)
- 如何设计过压保护电路?
- 光耦合器的工作原理和作用
- OpenCV学习笔记(6)基于 VC+OpenCV+DirectShow 的多个摄像头同步工作
- 乐高机器人亮剑_羊城e家互联网同道精英汇 多益网络诚邀更多游戏奋斗者加入...
- android加载网页pdf,android 一行代码搞定加载网络 pdf 文件
- cips2016+学习笔记︱简述常见的语言表示模型(词嵌入、句表示、篇章表示)
- Excel表格列多选
- 延时100ms的流水灯