案例
关注
分享
扫一扫
小案例
顾九七
满怀编程热情
展开
-
案例--商品价格排列
body部分 <div id="wrap"> <ul class="goods"> <!--外部获取数据，创建标签添加数据--> </ul> <ul class="btn"> <li>从高到低</li> <li>从低到高</li> <li>随机排序原创 2021-02-03 11:51:06 · 996 阅读 · 0 评论 -
案例---添加事件的另一种方法
HTML部分 <input type="text" id="clock" size="50"> <button onclick="test = window.clearInterval(test)">stop Interval</button>逻辑部分 var test = self.setInterval(clock,50) // 此处self指window function clock(){原创 2021-02-02 18:18:17 · 129 阅读 · 0 评论 -
案例---钟表
html部分 <canvas id="watch" width="500px" height="500px" style="margin: 20px 30%;"></canvas>样式部分 *{ margin: 0; padding: 0; } body{ background-color: rgb(145, 174, 228); }原创 2021-02-02 18:13:20 · 238 阅读 · 0 评论 -
案例--旋转太极图
html部分 <canvas id="can" width="500" height="500"></canvas>样式部分 *{ margin: 0; padding: 0; } body{ background-color: skyblue; } #can{ margin: 30px auto;原创 2021-02-02 18:10:14 · 231 阅读 · 0 评论 -
小案例--王一博美图大赏，图片自行脑补吧
结构部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <script src="ht原创 2021-01-27 16:17:01 · 294 阅读 · 0 评论 -
小案例-方块在浏览器页面随意移动
布局部分 <div id="box"></div>样式部分 *{ margin: 0; padding: 0; font-family: "Microsoft Yahei"; } #box{ position: absolute; left: 100px; top: 100px;原创 2021-01-03 22:08:11 · 338 阅读 · 0 评论 -
添加旅游目的地案例--使用创建节点、文档碎片、借用父节点删除节点
布局部分 <div id="wrap"> <div class="content"> <div class="left"> <p class="left-top"> 热门目的地： <!-- 页面布局如下 --> <!-- <span>原创 2020-12-28 16:38:24 · 125 阅读 · 0 评论 -
小案例--圆点沿圆的路径无限运动，用到了定时器、动画
一、圆周运动（CSS实现）<style> #wrap{ position: relative; width: 500px; height: 500px; margin:100px auto; border:1px solid; border-radius: 50%; } #wrap p{原创 2020-12-18 10:20:32 · 333 阅读 · 0 评论 -
transform和动画样式案例
跳动的心<!DOCTYPE html><html lang="zh-CN"> <head> <title></title> <meta charset="UTF-8"> <meta name="keywords" content=""> &...原创 2020-03-28 23:10:47 · 155 阅读 · 0 评论