2020-05-13 html的timer标签 + css的负边距应用 + js尾调用优化

# 2020-05-13 题目来源:http://www.h-camel.com/index.html

# [html] 你有使用过time标签吗?说说它的用途有哪些? #

    time标签是H5的新属性,<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码。

    <time>9:00</time>
    <time datetime="2020-02-14">情人节</time> 
    
    其中的datetime属性是日期或时间

    
    <time datetime="2014-09-16T18:20:30">Tuesday at 18:20</time>
    <time>2014-09-16T18:20:30+01:00</time> //带有时区的
    <time>2014-W18</time>  表示2014年第18个星期
    <time datetime="P4DT4H3M">four days</time> //表示一个时间段 4天4小时3分钟

# [css] css的负边距有哪些应用场景? # 

    负边距不会令节点脱离当前文档流,能够影响后面节点的布局。
    应用::气泡文字; 文本叠加等,再也不需要使用死板的绝对定位。
    例如:单列表改成多列表混排,margin-top设为负值的操作会使文档流上移



# [js] 举例说明js中什么是尾调用优化? # 
    
    这里的优化指的是 空间上的优化 对解释器的改进,尾调用优化是在支持ES6的解释器中添加的。
    从定义上来看,尾调用就是函数里的最后一个动作是函数调用。只在严格模式下生效,目前主流浏览器只有safari支持尾递归调用。
    应用后可以降低空间复杂度。
    例如:
    function c() {
       throw new Error()
       return 'return from c'
    }
    function b() {
       const b = 'b'
       return c()
    }
    function a() {
       const a = 'a'
       return b(a)
    }
    a();
    由于尾调用,a的返回仅仅依赖b的调用。所以a的stack frame是没有必要保存的,这样空间复杂度从O(n)降到了O(1).
    
        
# [软技能] 你们平时怎么学习的效率最高? # 
    
    1.相关文档 与其反复阅读,不如经常回顾
    2.多做练习,从错误中学习
    3.注意代码风格,多写可复用的代码
    4.劳逸结合,多与人讨论交流

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是制作轮播图的详细步骤以及完整的HTML+CSS+JS代码: 步骤: 1. 创建HTML结构,包括一个容器元素和多个轮播项元素。 2. 使用CSS样式设置容器元素的宽度和高度,并隐藏溢出部分。 3. 使用CSS样式设置轮播项元素的宽度和高度,并设置为浮动或使用flex布局。 4. 创建一个JavaScript函数,用于实现轮播功能。 5. 在JavaScript函数中,获取容器元素和轮播项元素,并设置初始索引值。 6. 在JavaScript函数中,使用定时器或事件监听器来触发轮播动画。 7. 在轮播动画中,根据索引值切换轮播项元素的显示。 8. 在轮播动画中,使用animate函数来实现平滑的过渡效果。 9. 可选:添加导航按钮或指示器来控制轮播。 HTML+CSS+JS代码如下: ```html <!DOCTYPE html> <html> <head> <title>轮播图制作</title> <style> .carousel-container { width: 600px; height: 400px; overflow: hidden; position: relative; } .carousel-item { width: 100%; height: 100%; float: left; display: none; } </style> </head> <body> <div class="carousel-container"> <div class="carousel-item"> <img src="image1.jpg" alt="Image 1"> </div> <div class="carousel-item"> <img src="image2.jpg" alt="Image 2"> </div> <div class="carousel-item"> <img src="image3.jpg" alt="Image 3"> </div> </div> <script> function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); if (callback) { callback(); } } obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } window.onload = function () { var container = document.querySelector('.carousel-container'); var items = document.querySelectorAll('.carousel-item'); var index = 0; function carousel() { for (var i = 0; i < items.length; i++) { items[i].style.display = 'none'; } items[index].style.display = 'block'; animate(items[index], 0, function () { setTimeout(function () { animate(items[index], -container.offsetWidth); index = (index + 1) % items.length; }, 2000); }); } carousel(); }; </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值