JavaScript小案例
关注
分享
扫一扫
Melonico
这个作者很懒，什么都没留下…
展开
-
JavaScript——checkbox的全选，全不选与反选实现
页面显示功能分析全选按钮可以选中所有的checkbox全不选按钮可以取消所有的checkbox反选按钮可以选中未选择的checkbox，并取消以选择的checkbox实现页面内容csstable{ border: 1px solid black; width: 500px; margin: auto;}td,th{ text-align: center; border: 1px solid;}div{ margin: auto; width: 500px;原创 2020-06-28 19:38:56 · 1173 阅读 · 0 评论 -
JavaScript——定时跳转页面
1. 在html中显示内容<p> <span id="time">5</span>秒后跳转页面...</p>2. 获取 span 对象并设置一个秒数计数器var time = document.getElementById("time");var second = 5;3. 定义秒数显示方法，每次执行该方法second自减function showTime() { second--; time.innerHTML = second.t.原创 2020-06-25 01:24:42 · 884 阅读 · 0 评论 -
JavaScript——简单实现轮播图效果
分析：可以通过获取img元素对象并更改其src属性实现该效果，并使用定时器实现在一段时间后多次切换1. 使用 img 标签显示图片<img id="img" src="img/pic1.png" style="width: 100%">2. 获取元素对象var img = document.getElementById("img");3. 更改 img 对象的 src 属性img.src = "img/pic2.png";直到，我们只可以满足更换1次图片，并且只能更换1张，原创 2020-06-24 20:21:35 · 287 阅读 · 0 评论 -
JavaScript——使用按钮创建并关闭新的窗口页面
1. 在html中使用 input 标签创建一个按钮<input id="input" type="button" value="创建新窗口">2. 获取 input 对象var btn = document.getElementById("input");3. 绑定方法btn.onclick = function () { open();}完整代码<!DOCTYPE html><html lang="en"><head>原创 2020-06-24 18:30:49 · 1441 阅读 · 0 评论 -
JavaScript——实现九九乘法表
这是一张99乘法表，我们需要用JavaScript来实现这个99乘法表在观察表后，可以发现每一个表达式都可以用 a*b=c 来表示出来，而c可以借用算术计算出来，所以我们只需要用到两个变量基础实现var i,j;我们可以将每个表达式理解为列数×行数，如2×5则为第二列×第五行观察可得，行数最多为9行，列数最多也为9列通过两个循环嵌套可以写出一个基础的乘法表代码var i; //定义行数var j; //定义列数for (i = 1;i <= 9;i++){ //循环9行 .原创 2020-06-22 17:24:56 · 17684 阅读 · 1 评论 -
JavaScript——使用Math对象生成0~100的随机数
1.使用random()方法生成随机小数，范围[0,1)Math.random();2.对1的结果乘以100，随机数范围[0,100)Math.random() * 100;3.使用ceil()方法对2的结果进行向上取整Math.ceil(Math.random() * 100);或使用floor()方法进行向下取整，然后结果+1Math.floor(Math.random() * 100) + 1;4.输出结果document.write(Math.ceil(Math.rando原创 2020-06-23 16:33:59 · 12430 阅读 · 0 评论 -
JavaScript——简单的元素对象控制：点击切换div背景色
1. 创建一个div标签并设置大小和背景色<div id="d1" style="height: 50px;width: 50px;background-color: gray"></div>2. 获取div对象var div = document.getElementById("d1");3. 给div对象绑定事件div.onclick = function () { div.style.backgroundColor = "yellow";}4. 添加一个原创 2020-06-24 17:14:16 · 1838 阅读 · 0 评论