日度归档:2020年5月7日

css如何实现一个打字效果呢?


摘要:
以前我们实现打字效果,通常会采用javscript循环输出字符的方式
那么下文将采用全新的css打字效果,如下所示:


实现思路:
1.使用动画使文字所处的宽度依次变大,文本信息慢慢的显示出来
此处宽度使用相对单位em
2.使用动画实现光标闪闪的效果

例:
css实现打字效果

<meta charset='utf-8' />
<p>
maomao365.com <br />
css实现打字效果示例分享
</p>
<hr />
<style>
  .printing {
    width: 21em;
    white-space: nowrap;
    border-right: 2px solid transparent;
    animation: dongHua 3.5s steps(15, end), guangBiao .75s step-end infinite;
    overflow: hidden;
}
/* 打印效果 */
@keyframes dongHua {
  from { width: 0; }
  to { width: 15em; }
}
/* 光标闪啊闪 */
@keyframes guangBiao {
  from, to { box-shadow: 1px 0 0 0 transparent; }
  50% { box-shadow: 1px 0 0 0; }
} 
</style>
<p class="printing">猫猫教程--CSS实现打字效果的方法分享</p>
css实现打字效果示例分享

css实现打字效果示例分享

javascript中你是否知道–单竖杠“|”运算符的功能呢?


摘要:
下文讲述javascript中单竖杠“|”运算符的功能,如下所示:


写在前面的话:
在js代码的编写中,我们见过很多的双竖杠”||”或运算符,但很少人见过单竖杠“|”运算符,那么这个单竖杠“|”到底起什么作用呢?
看下文一一道来:


 单竖杠“|”运算符的功能:
    将运算符左右两边的数转换为二进制数,然后进行相加,并返回所得到的结果
单竖杠“|”运算符注意事项:
    同零进行运算---Number|0 
    1.正数的时候,相当于向下取整,Math.floor()
    2.负数的时候,相当于向上取整,Math.ceil()

例:
单竖杠“|”运算符的举例:

  <meta charset="UTF-8"> 
  <p>
     maomao365.com <br />
	 单竖杠'|'运算符举例说明
  </p>
  <hr />
   <script>
 document.write(0.8|0) // 0
 document.write("<br />");
document.write(2.2|0) //2
document.write("<br />");
document.write(3.885122|0) // 3
document.write("<br />");
document.write(-6.28|0) // -6
document.write("<br />");
document.write(-8.896|0) // -8
document.write("<br />");


document.write(8|2) // 10
document.write("<br />");
//转换为二进制之后 1000|010  相加得到1010=10

document.write(2|2) // 2
document.write("<br />");
// 转换为二进制之后 010|010  相加得到010=2

document.write(9|3) // 11
document.write("<br />");
// 转换为二进制之后 1001|011  相加得到1011=11

document.write(6.5|5.3) // 7
document.write("<br />");
//6和5分别转换为二进制 110|101  相加得到111=7
   </script>
 

相关阅读:
javascript 如何进行进制(10进制,2进制,8进制,16进制)之间转换呢?

javascript 单竖杠运算符示例分享

javascript 单竖杠运算符示例分享

javascript如何手动实现一个map方法呢?


摘要:
下文讲述javascript中手动实现一个原生态map方法的示例分享,如下所示:


写在前面的话,map方法是一个循环方法,那么实现一个原生态的map方法,我们可以采用for循环的方式实现这一需求,如下所示:

例:
javascript手动实现一个原生态的map方法

<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="UTF-8"> 
  <meta name="author" content="猫猫教程">
  <title>猫猫教程(maomao365.com)
  ---实现javascript原生态map方法的示例分享
  </title>
</head>
<body>
  <script>
    Array.prototype.mapExtend = function (callback) {
      if (!Array.isArray(this) || !this.length || typeof callback !== 'function') {
        return []
      } else {
        let result = [];
        for (let i = 0; i < this.length; i++) {
          const element = this[i];
          result.push(callback(element, i, this))
        }
        return result
      }
    }
    
	//原生态map测试
    let arr = [88,123,66,88, 66]
    let r = arr.mapExtend((ele, i) => {
      return ele + 10
    })
    
	document.write(r);
  </script>
</body>
</html> 
 
javascript原生态map方法实例分享

javascript原生态map方法实例分享