案例
-
流氓软件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ background-color: blue; width: 250px; height: 200px; position: absolute; top: 0; right: 0; } span{ color: yellow; font-size: 14px; } button{ float: right; border: 0; background-color: grey; color: white; } </style> </head> <body> <div> <span>此广告位招租</span> <button type="button" onclick="move1()">关闭</button> </div> <script type="text/javascript"> top1 = 0 right1 = 0 count1 = 0 function move1(){ count1 ++ var div = document.getElementsByTagName('div')[0] if(count1 == 5){ div.remove() }else{ top1 += 50 right1 += 50 div.style.top = top1 + 'px' div.style.right = right1 + 'px' } } </script> </body> </html> -
闪烁
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 800px; height: 400px; border: 1px solid gray; margin-left: auto; margin-right: auto; } #box2{ text-align: center; margin-top: 10px; } #box2>button{ border: 0; background-color: red; color: white; width: 70px; height: 30px; } #box1>div{ width: 80px; height: 80px; float: left; } </style> </head> <body> <div id="box1"> </div> <div id="box2"> <button type="button" onclick="addAction()">添加</button> <button id="btn1" type="button">闪烁</button> </div> <script type="text/javascript"> function randowColor(a=1){ r = parseInt(Math.random()*255) g = parseInt(Math.random()*255) b = parseInt(Math.random()*255) return 'rgba('+r+','+g+','+b+','+a+')' } // 1.添加小方块 count = 0 function addAction(){ var div = document.createElement('div') div.style.backgroundColor = randowColor(0.3) var box1 = document.getElementById('box1') box1.insertBefore(div, box1.firstElementChild) count++ if(count>50){ box1.lastElementChild.remove() count-- } } //2.闪烁 document.getElementById('btn1').onclick = function(){ if(this.innerText == '闪烁'){ this.innerText = '暂停' t1 = setInterval(function(){ //修改每个小盒子的背景颜色 var allSamllDiv = document.getElementById('box1').children for(index=0;index<allSamllDiv.length;index++){ allSamllDiv[index].style.backgroundColor = randowColor(0.3) } }, 100) }else{ this.innerText = '闪烁' clearInterval(t1) } } </script> </body> </html>
常用弹框
a. alert(提示信息) - 弹出提示信息(带确定按钮)
b. confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔值，取消-false, 确定-true
c. prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消，确定按钮的提示框; 点取消，返回值是null;点确定返回值是输入框中输入的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="message1()">弹框1</button>
<button onclick="message2()">弹框2</button>
<button onclick="message3()">弹框3</button>
</body>
1.第一类弹框
只有提示信息和确定按钮的弹框
alert(提示信息)
function message1(){
alert('添加成功')
}
2.第二类弹框
有提示信息、确定按钮和取消按钮的弹框
返回值如果是true表示用户点击的是确定按钮，如果是false表示用户点击的是取消按钮
function message2(){
var result = confirm('是否要删除这个数据')
//console.log(result)
if(result == true){
//确定的时候做的事情
}else{
//取消的时候做的事情
}
}
3.第三类弹框
有提示信息、输入框、确定按钮和取消按钮的弹框
返回值如果是null表示用户点击的是取消按钮，返回值如果是输入框中内容，表示点击的是确定按钮
function message3(){
var result = prompt('请输入你的名字：','张三')
console.log(result)
}
jQuery的用法
jQuery是一个js库，它可以让js的DOM操作变得更简单。
使用jQuery前必须先导入jQuery的库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="div1">
<p>我是段落1</p>
<p class="c1">我是段落2</p>
<a href="">我是超链接1</a>
</div>
<div id="div2">
<p class="c1">我是段落3</p>
<p>我是段落4</p>
</div>
<a id="a1" href="https://www.baidu.com">百度</a>
<input type="" name="" id="" value="张三" />
</body>
1.获取节点
$(css选择器)
<script type="text/javascript">
document.getElementsByClassName('c1')
result= $('.c1')
console.log(result)
</script>
2.创建、添加和删除节点
创建节点😒(html代码)
p = $('<p class="c1">我是段落5</p>')
div = $('<div class="c2"><p>苹果</p><span>×</span></div>')
添加节点
节点1.append(节点2) - 在节点1中的最后添加节点2
节点1.prepend(节点2) - 将节点2插入到节点1中的最前面
节点1.before(节点2) - 将节点2放到节点1的前面
节点1.after(节点2) - 将节点2放到节点1的后面
$('body').append(div)
$('body').prepend(p)
$('#div2').before($('<img src="img/car.png">'))
删除节点
$('#div1').remove()
3.节点属性和节点内容
获取和修改标签内容
获取：标签.text()、标签.html()
修改：标签.text(新的数据)、标签.html(新的数据)
result = $('#a1').text()
console.log(result)
// $('#a1').text('<span>京东</span>')
$('#a1').html('<span>京东</span>')
普通的属性的修改和获取
标签.attr(属性名)
标签.attr(属性名, 新的属性值)
result = $('#a1').attr('href')
console.log(result)
$('#a1').attr('href', 'https://www.jd.com')
// value属性：
result = $('input').val()
console.log(result)
$('input').val('李四')
jQuery事件绑定
<body>
<button class="c1">按钮1</button>
<button class="c1">按钮2</button>
<button class="c1">按钮3</button>
<button class="c1">按钮4</button>
<button id="add" onclick="addBtn()">添加</button>
</body>
<script type="text/javascript">
number =4
function addBtn(){
number++
$('#add').before($('<button class="c1">按钮'+number+'</button>'))
}
1.直接绑定
$('#btn1').on('click',function(){
alert('你好！')
})
</script>
</html>
2.通过父标签给指定的子标签绑定事件
标签.on(事件名,子标签选择器,函数)
$('body').on('click','.c1',function(){
alert('你好!'+this.innerText)
})
</script>
</html>
Vue基本用法
Vue的原则：通过控制数据来控制标签
1.控制标签内容
{{vue中data的属性名}}
<div id="app1">
<p>{{name}}</p>
<button onclick="app1.name='hello world!'">修改</button>
<p>{{age}}</p>
<p>{{gender}}</p>
</div>
2.控制标签属性
v-bind:标签属性名=“vue中data的属性名”
<div id="app1">
<a v-bind:href="url">{{appName}}</a>
</div>
3.for循环
v-for=“变量 in vue中data的容器属性名”
<div id="app2">
<div v-for="x in fruits">
<p>{{x}}</p>
<span>×</span>
</div>
</div>
4.双向绑定
v-mode:vue中data的属性名
<div id="app2">
<p>{{addName}}</p>
<input v-model="addName" />
<button type="button" onclick="app2.fruits.push(app2.addName)">添加</button>
</div>
script:
<script type="text/javascript">
// 1. 创建Vue对象
app1 = new Vue({
el:'#app1', //确定绑定对象, 当前这个Vue能控制的只能是id为app1的标签中的所有标签
data:{
name:'张三',
age:18,
gender:'男',
appName: '百度',
url: 'https://www.baidu.com'
}
})
app2 = new Vue({
el:'#app2',
data:{
fruits:['苹果', '西瓜', '葡萄', '火龙果', '山竹', '榴莲'],
addName: '123'
}
})
</script>
5.购物车案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box1">
<div v-for="goods in goodsList">
<img v-bind:src="goods.image" >
<p>{{goods.name}}</p>
<p>{{goods.price}}</p>
<button type="button" v-on:click="goods.count++">+</button>
<input v-bind:value="goods.count" />
<button type="button" v-on:click="goods.count--">-</button>
<p>{{goods.price * goods.count}}</p>
<button type="button">删除</button>
<hr >
</div>
<span>合计:</span><span>{{totalPrice}}</span>
</div>
<script type="text/javascript">
var app1 = new Vue({
el: '#box1',
data:{
goodsList:[
{
image:"img/a1.jpg",
name:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂',
price:138,
count:1,
},
{
image:"img/a2.jpg",
name:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂',
price:198,
count:1,
},
{
image:"img/a3.jpg",
name:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂',
price:200,
count:1,
}
]
},
computed:{
totalPrice: function(){
var result = 0
for(index=0;index<this.goodsList.length;index++){
var x = this.goodsList[index]
result += x.price * x.count
}
return result
}
}
})
</script>
</body>
</html>
扫一扫
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
