倒计时27天

本文介绍了如何使用JavaScript操作CSS,实现元素跟随鼠标移动的效果,以及DOM操作技巧,包括删除和添加table行。通过event对象解决浏览器兼容问题,获取鼠标坐标,并动态更新元素位置。同时,讲解了如何为table添加删除功能,通过遍历链接并定位到tr节点进行删除。此外,还展示了如何获取用户输入并添加新的table行,涉及到表单数据的获取和DOM元素的插入。
摘要由CSDN通过智能技术生成

采用BOM对象利用js操作CSS

练习1:box1跟着鼠标进行移动

  1. 元素的名字.style.left,top  通过这个方式改变盒子的位置
  2. 解决event的浏览器兼容问题,利用event=event||window.event
  3. 传递的event这个参数可以获得鼠标的信息,例如鼠标位置,按下与否等

利用DOM对象对table表进行增加和删除

  1. 删除:
  • 通过链接删除的,首先对每个链接进行绑定单击事件,然后通过a.parentnode.parentnode寻找到tr这个父节点,然后进行删除,通过this知道鼠标点击的是哪一个。
  • 然后要获取到tr的父节点,删除是需要通过父节点然后用remove child进行的

2.对table表进行添加

首先要获取提交按钮绑定单击事件,然后从用户输入的界面中获取值,通过var name=document.getelementbyid("name").value可以获取到表单里面的值

添加一个tr形式的东西到原来的表格之中,先创建一个tr,然后获取它的父节点,再将tr添加进去。

 

 

以下是使用Excel函数和Canvas实现145倒计时的方法: 1. 使用Excel函数: 在Excel中,可以使用日期函数和计算函数来实现倒计时效果。假设今是2021年1月1日,要计算145后的日期,可以使用以下公式: ``` =DATE(YEAR(TODAY()), MONTH(TODAY()), DAY(TODAY()) + 145) ``` 将该公式输入到一个单元格中,即可得到145后的日期。 2. 使用Canvas实现倒计时效果: 可以使用JavaScript和Canvas来实现倒计时效果。首先,创建一个HTML文件,并在其中添加一个Canvas元素: ```html <canvas id="countdownCanvas" width="200" height="200"></canvas> ``` 然后,在JavaScript中编写代码来实现倒计时效果: ```javascript var canvas = document.getElementById("countdownCanvas"); var context = canvas.getContext("2d"); var endDate = new Date(); endDate.setDate(endDate.getDate() + 145); function drawCountdown() { var now = new Date(); var timeLeft = endDate.getTime() - now.getTime(); var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); context.clearRect(0, 0, canvas.width, canvas.height); context.font = "30px Arial"; context.fillText(days + " " + hours + "小时 " + minutes + "分钟 " + seconds + "秒", 50, 100); if (timeLeft > 0) { requestAnimationFrame(drawCountdown); } } drawCountdown(); ``` 以上代码会在Canvas上绘制一个倒计时效果,显示剩余的数、小时、分钟和秒数。每秒钟更新一次倒计时,直到倒计时结束。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值