1、单机版的购物系统
<style>
/* ul{
border: 1px solid red;
} */
ul>li {
width: 1200px;
/* border: 1px solid black; */
list-style: none;
display: flex;
line-height: 40px;
flex-direction: row;
justify-content: space-between;
}
li>div {
padding: 0 30px;
width: 300px;
text-align: center;
}
ul>li .acte{
width: 600px;
text-align: center;
}
.smallimage {
width: 50px;
height: 40px;
}
.addtoCar{
width: 100px;
height: 40px;
float: left;
}
.removeGood{
width: 100px;
height: 40px;
float: left;
}
</style>
<body>
<!-- 需要一个添加商品的功能
展示商品的功能（添加购物车 删除商品的功能）
需要购物车展示的功能（删除购物车的商品） -->
<!-- 商品名 价格 商品的描述 图片 id（唯一的） 按钮-->
商品名：<input type="text" class="addGoods" placeholder="请输入商品名称">
价格：<input type="number" class="addGoods" placeholder="请输入商品价格">
描述：<textarea class="addGoods"></textarea>
图片：<input type="text" class="addGoods">
<button id="save">添加商品</button>
<ul id="goodList">
<!-- 商品展示 -->
<li>
<div>id</div>
<div>商品名</div>
<div>价格</div>
<div>描述</div>
<div>图片</div>
<div class="acte">操作</div>
</li>
</ul>
<!-- 购物车 -->
<table id="carTB" border="1">
<tr>
<th>商品名</th>
<th>价格</th>
<th>描述</th>
<th>图片地址</th>
<th>数量</th>
<th>操作</th>
</tr>
</table>
<script>
// 获取输入的内容
var goods = document.querySelectorAll('.addGoods')
var savegd = document.getElementById('save')
var goodsa = []
var car = []
savegd.onclick = function () {
// 获取输入的内容
var goodName = goods[0].value
var price = goods[1].value
var info = goods[2].value
var image = goods[3].value
// 唯一 时间戳+随机数
var id = Date.now().toString() + parseInt(Math.random() * 300)
// 添加 简写 当你的对象里面的属性是一个变量的时候 他的变量名和你的key是一样的时候可以省略key
goodsa.push({
goodName:goodName, price,info,image,id
})
randerGoodToUl(goodName, price, info, image, id)
}
// 动态的渲染到ul里面
var goodList = document.getElementById('goodList')
function randerGoodToUl(goodName, price, info, image, id) {
goodList.innerHTML +=
`
<li>
<div>${id}</div>
<div>${goodName}</div>
<div>${price}</div>
<div>${info}</div>
<div><img src="${image}" alt="" class="smallimage"></div>
<div style="width: 650px;display:flex;">
<button class="addtoCar" onclick='addtoCar(${id})'>加入购物车</button>
<button class='removeGood' onclick="removeGood(${id})">删除商品</button>
</div>
</li>
`
}
// 获取所有的删除按钮
// var rmBtns = document.querySelectorAll('removeGood')
// for(var i=0;i<rmBtns.length;I++){
// rmBtns[i].onclick = function(){
// // 把li删除
// this.parentElement.parentElement.remove()
//
// }
// }
function removeGood(id) {
// 把li删除 event.target指向当前操作的元素 this指向window
event.target.parentElement.parentElement.remove()
// 把商品数组里面对应id的元素删除
// 遍历商品数组找到对应的id
var rmIndex
for (var index in goodsa) {
// 找到对应的id
if (goodsa[index].id == id) {
rmIndex = index
break
}
}
// 将这个下标对应的对象删除
goodsa.splice(rmIndex, 1)
}
// 添加到购物车的方法
function addtoCar(id) {
var currentGood = {}
for (var good of goodsa) {
// 找到对应的id
if (good.id == id) {
currentGood = good
break
}
}
// 加到购物车
var flag = false //里面没有
for (var index in car) {
if (car[index].id == currentGood.id) {
flag = index
}
}
if (flag || flag === 0) {
car[flag].count++
document.querySelectorAll('.count')[flag].innerText = car[flag].count
} else {
currentGood.count = 1
car.push(currentGood)
// 渲染到table里面
randerToTable(currentGood)
}
console.log(car);
}
var tb = document.querySelector('#carTB')
// 传参为商品
function randerToTable(good) {
var keys = ['goodName', 'price', 'info', 'image', 'count']
// 声明一个行
var row = tb.insertRow(-1)
// 声明对应的列
for (var i = 0; i < 6; i++) {
var cell = row.insertCell(i)
if (i == 5) {
cell.innerHTML = `<button onclick="rmCar(${good.id})">移除购物车</button>`
} else {
// 创建文本节点
cell.innerText = good[keys[i]]
}
if (i == 4) {
cell.className = 'count'
}
}
}
// 移除购物车内的东西
function rmCar(id) {
// 把li删除 event.target指向当前操作的元素 this指向window
event.target.parentElement.parentElement.remove()
// 把商品数组里面对应id的元素删除
// 遍历商品数组找到对应的id
var rmIndex
for (var index in car) {
// 找到对应的id
if (car[index].id == id) {
rmIndex = index
break
}
}
// 将这个下标对应的对象删除
car.splice(rmIndex, 1)
}
</script>
</body>
2、点击切换表格中的图片
<style>
table td{
width: 100px;
height: 100px;
}
table td img{
width: 100%;
height: 100%;
}
img{
width: 1000px;
height: 580px;
}
</style>
<body>
<table>
<tr>
<td><img src="./1.webp" alt=""></td>
<td><img src="./2.webp" alt=""></td>
<td><img src="./3.webp" alt=""></td>
</tr>
</table>
<img src="" alt="" id="show">
<!-- 点击表格中的三张图片，切换下面的图片 -->
<script>
var imgs = document.querySelectorAll('img')
var show = imgs[3]
// 默认情况
show.src = imgs[0].src
// 遍历加事件
for(var i=0;i<imgs.length-1;i++){
imgs[i].onclick = function(){
show.src = this.src
}
}
</script>
</body>
3、 有一个装有颜色的数组 ["red", "blue", "yellow", "green", "black", "orange"];
// 点击button 启动定时器,每一秒给它换一次色, 按顺序循环换色
<style>
div{
width: 500px;
height: 500px;
}
</style>
<body>
<div id="box"></div>
<button onclick="action()">更换颜色</button>
<script>
// 1, 有一个装有颜色的数组 ["red", "blue", "yellow", "green", "black", "orange"];
// 点击button 启动定时器,每一秒给它换一次色, 按顺序循环换色
var colors =["red", "blue", "yellow", "green", "black", "orange"]
var box = document.getElementById('box')
var i=0
var timer
function action(){
clearInterval(timer)
timer = setInterval(function(){
box.style.backgroundColor = colors[i]
if(i==colors.length-1){
i=0
}
i++
},1000)
}
</script>
</body>
4、隔行变色（ul li）
<style>
width: 1000px;
height: 300px;
}
</style>
<body>
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
// 4, 隔行变色
var list = document.getElementsByTagName('li')
for(var i=0;i<list.length;i++){
if(i%2==0){
list[i].style.backgroundColor='pink'
}else{
list[i].style.backgroundColor='skyblue'
}
}
</script>
</body>
5、实现一个个人信息页面 姓名 年龄 学历 专业, 可以获取到输入的信息, 点击保存按钮以后, 输出信息(信息显示形式: 姓名:张三,年龄:33,学历:本科,专业:计算机)
// 要求: 分别使用通过id, tagName, name三种获取节点的方式实现
<style>
width: 350px;
height: 100px;
}
</style>
<body>
<div id="box">
<input type="text" placeholder="姓名" id="uname">
<input type="text" placeholder="年龄" >
<input type="text" placeholder="学历" name="deg">
<input type="text" placeholder="专业">
<button>保存</button>
</div>
<script>
// 1, 实现一个个人信息页面 姓名 年龄 学历 专业, 可以获取到输入的信息, 点击保存按钮以后, 输出信息(信息显示形式: 姓名:张三,年龄:33,学历:本科,专业:计算机)
// 要求: 分别使用通过id, tagName, name三种获取节点的方式实现
var uname = document.getElementById('uname')
var age = document.getElementsByTagName('input')[1]
var degree = document.getElementsByName('deg')[0]
var magor = document.getElementsByTagName('input')[3]
document.getElementsByTagName('button')[0].onclick = function(){
console.log(`姓名：${uname.value} 年龄：${age.value} 学历：${degree.value} 专业：${magor.value}`);
}
</script>
</body>
6、简易年历
<style>
div{
width: 300px;
padding: 5px;
}
p{
background-color: pink;
height: 50px;
}
</style>
<body>
<div>
<p></p>
</div>
<script>
var ptn = document.querySelector('p')
function createButton(){
for(var i=0;i<12;i++){
var btn = document.createElement('button')
btn.innerHTML = i+1
btn.style.height ='50px'
btn.style.width='100px'
document.querySelector('div').insertBefore(btn,ptn)
}
}
createButton()
// 获取所有按钮
var btns = document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
ptn.innerHTML= this.innerHTML+'月好'
}
}
</script>
</body>
7、网页换肤, 点击皮肤1, 切换到第一张图的效果, 点击皮肤2切换到第二张图的效果
<style>
*{
margin: 0;
padding: 0;
}
body{
background-repeat: no-repeat;
background-size: 100%;
}
width: 600px;
height: 400px;
margin:0 auto;
border: 1px solid red;
}
</style>
<body>
<div id="box">
<button onclick="fn()">皮肤1</button>
<button onclick="fn1()">皮肤2</button>
</div>
<script>
// 3, 网页换肤, 点击皮肤1, 切换到第一张图的效果, 点击皮肤2切换到第二张图的效果
var box= document.getElementById('box')
function fn(){
box.style.backgroundColor = 'pink'
var father = box.parentElement
father.style.backgroundImage="url(./1.webp)"
}
function fn1(){
box.style.backgroundColor = 'gold'
var father = box.parentElement
father.style.backgroundImage="url(./2.webp)"
}
</script>
</body>
8、写一个定时器, 每隔0.1秒修改一次div内文字颜色和文字大小. 最开始这个文字是默认大小, 开启定时器后文字大小开始增大, 当增大了6次以后, 文字大小开始缩小, 缩小6次, 文字再开始增大…
<style>
div{
width: 600px;
height: 500px;
background-color: purple;
margin: 0 auto;
color: green;
}
</style>
<body>
<div>
看我72变
</div>
<script>
// 2, 写一个定时器, 每隔0.1秒修改一次div内文字颜色和文字大小. 最开始这个文字是默认大小, 开启定时器后文字大小开始增大, 当增大了6次以后, 文字大小开始缩小, 缩小6次, 文字再开始增大…效果如下图:
function randomColor(){
var r = parseInt(Math.random()*255)
var g = parseInt(Math.random()*255)
var b = parseInt(Math.random()*255)
return `rgb(${r},${g},${b})`
}
// 获取div
// 改大小
var defaultSize = 16
var i=0
var div = document.querySelector('div')
// 定时器
setInterval(function(){
div.style.color = randomColor()
// 每一次去加4
i++
if(Math.ceil(i/6)%2==0){//--
defaultSize-=4
}else{//++
defaultSize+=4
}
div.style.fontSize = defaultSize+'px'
},100)
</script>
</body>
9、tab切换
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
border: 1px solid red;
position: relative;
}
ul{
width: 501px;
height: 22px;
}
ul>li {
list-style: none;
float: left;
width: 70px;
text-align: center;
}
div>div {
height: 300px;
position: absolute;
top: 22px;
left: 0;
}
display: none;
}
.selected {
background-color: orange;
}
</style>
<body>
<div>
<ul>
<li id="first" class="selected">刘敏</li>
<li id="last">李月梦</li>
</ul>
<div id="fbox">刘敏专业吃粑粑</div>
<div id="lbox">呵呵哈哈哈哈哈哈</div>
</div>
<script>
var lists = document.querySelectorAll('ul>li')
var cont = document.querySelectorAll('div>div')
for (var i = 0; i < lists.length; i++) {
lists[i].index = i
lists[i].onclick = function () {
for (var j = 0; j < lists.length; j++) {
lists[j].className = ""
}
this.className = 'selected'
for (var k = 0; k < cont.length; k++) {
cont[k].style.display='none'
}
cont[this.index].style.display = 'block'
}
}
</script>
</body>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律