随笔分类 - 前端 合集
摘要：预览 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的实例</title> </head> <body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn>
阅读全文
摘要：源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model结合select类型</title> </head> <body> <div id="app"> <!-- 选择一个--> <select
阅读全文
摘要：预览： 源码： <div id="app"> <!--单选框--> <label for="agree"> <input type="checkbox" id="agree" v-model="isAgree">同意协议 </label> <h2>您选择的是{{isAgree}}</h2> <but
阅读全文
摘要：预览： 源码： <div id="app"> <!--多选框--> <input type="checkbox" value="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input
阅读全文
摘要：写在博客前的话： 保留两位小数使用的是 .toFixed(2) 方法 动态绑定v-bind:disabled='item.count <=1 '来判断按钮是否可点击 按钮的动态使用index去判定 思路： 表格的建立，表头，循环遍历js中的数组 实现过滤器添加￥与实现小数点后两位 实现加减按钮的点击
阅读全文
摘要：要求： 点击列表中的哪一项，那么该项文字变为红色（结合v-for和v-bind来实现） 预览： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业</title> <style> .active{
阅读全文
摘要：三种循环方法 for( let i=0;i<this.books.length;i++){} for (let i in this.books){} for (let book of this.books){} <!DOCTYPE html> <html lang="en"> <head> <met
阅读全文
摘要：
阅读全文
摘要：要求： 1、数组StudentList 2、点击按钮，将表单中的【姓名】和【年龄】赋值给Student对象，并push到StudentList中。 预览： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl
阅读全文
摘要：要求： 水果列表删除提示功能 1、制作一个水果列表 2、删除选中的水果 删除时，使用confirm提示是否确认删除 预览： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水果列表删除提示功能</ti
阅读全文
摘要：要求：1、随机生成一个1--100的数字 2、在prompt弹出框中猜数字 3、提示【大于目标结果】【小于目标结果】【恭喜你回答正确】 预览： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>猜数字<
阅读全文
摘要：预览： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>防抖与节流</title> <style> body{ height: 2000px; } button{ position:fixed; ri
阅读全文
摘要：预览： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>防抖与节流</title> <style> body{ height: 2000px; } button{ position:fixed; ri
阅读全文
摘要：要求：在网页中制作一个秒表（开始功能、停止功能、重置） 预览： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> </head> <body> <button class="st
阅读全文
摘要：要求：在网页中显示当前时间 预览效果： 思路： y：year 年 M：Month 月 d：day 日 h：hours 小时 （h(12小时)/H(24小时)） m：minutes 分钟 s：seconds 秒钟 源码： let h1 = document.querySelector("h1"); s
阅读全文
摘要：预览： 源码： let box = document.querySelector(".box"); box.ontouchstart = function (){ console.log("start"); } box.ontouchend = function (){ console.log("e
阅读全文
摘要：预览： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件类型</title> <style> .box{ width: 200px; height: 200px; background-color
阅读全文
摘要：预览： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标事件</title> <style> .box{ width: 200px; height: 200px; background-color
阅读全文
摘要：演示： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随鼠标显示大图</title> <style> .picture-list img{ width: 320px; height: 160px;
阅读全文
摘要：源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作轮播图</title> <style> .swiper{ width: 640px; height: 320px; overflow: hid
阅读全文
浙公网安备 33010602011771号