日度归档:2020年2月18日

javascript 如何实现红绿灯效果呢?


摘要:
下文讲述js实现红绿灯效果的方法分享,如下所示:


实现思路:
1.使用setinterval 重复调用颜色输出函数
2.使用promise实现

例:


<script>

 //使用setInterval实现循环调用函数

var n = 0;
function setRYG () {
  if (n % 3 == 0) { console.log('red') }
  else if (n % 3 == 1) { console.log('yellow') }
  else { console.log('green') }
  n++;
}
setInterval(function () { setRYG() },3000);

</script>


<script>

//使用Promise实现红绿灯效果

async function showInfo (color, duration) {
  console.log(color)
  await new Promise(function (resolve) {
    setTimeout(resolve, duration);
  })
}

async function main () {
  while (true) {
    await showInfo('red', 1000)
    await showInfo('yellow', 2000)
    await showInfo('green', 5000)
  }
}
main();

</script>

CSS cursor属性功能简介说明


摘要:
下文讲述css中cursor属性简介说明,如下所示:


css cursor属性功能简介

cursor 属性功能:
定义显示光标样式信息
cursor可能存在值

属性值

值说明
url

定义光标所使用的图片信息
default

默认光标(通常是一个箭头)
auto

默认。浏览器设置的光标
crosshair

光标呈现为十字线
pointer

光标呈现为指示链接的指针(一只手)
move

此光标指示某对象可被移动
e-resize

此光标指示矩形框的边缘可被向右(东)移动
ne-resize

此光标指示矩形框的边缘可被向上及向右移动(北/东)
nw-resize

此光标指示矩形框的边缘可被向上及向左移动(北/西)
n-resize

此光标指示矩形框的边缘可被向上(北)移动
se-resize

此光标指示矩形框的边缘可被向下及向右移动(南/东)
sw-resize

此光标指示矩形框的边缘可被向下及向左移动(南/西)
s-resize

此光标指示矩形框的边缘可被向下移动(南)
w-resize

此光标指示矩形框的边缘可被向左移动(西)
text

此光标指示文本
wait

此光标指示程序正忙(通常是一个圆圈)
help

此光标指示可用的帮助(通常是一个问号或一个气球)


css cursor属性举例应用


 <html>
<meta charset='utf-8' />
<title>猫猫教程(www.maomao365.com)--css cursor属性值举例演示</title>
<body>
<p>鼠标放上时,将显示指定的样式信息</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

</html>

 

javascript中js脚本如何编写死循环呢?


摘要:
下文讲述Javascript中js脚本编写死循环的方法分享,如下所示:

例:
下文举例讲述Js编写死循环的方法分享,如下:

<script>

//1.while 永远为真循环
while (true) {}

//for循环
for (let i = 0; i > 0; i++) {}


//for无限定条件永远循环
for (;;) {}

//do while 实现死循环
let i = 0;
do {
  i++;
} while (i > 0);

//递归实现死循环
function fn(a) {
  console.log(a);
  fn(a);
}
 
</script>