fdsaf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
display:flex;
width:1000px;
height:400px;
border:1px solid blue;
padding: 15px;
}
.award-base{
width:200px;
height:100px;
margin-right:10px;
border: 1px solid green;
}
.award-on{
border: 5px solid red;
}
</style>
</head>
<body>
<div id="container"></div>
<button id="go">开始抽奖</button>
<script>
let allStep = 0;
let restStep = 0;
const awardDomArr =[]
const awardTextArr = ['电脑','手机','平板','手表','手机壳','谢谢回顾','一等奖','二等奖']
function init (){
const container= document.getElementById("container")
for(let i =0; i< awardTextArr.length;i++){
const _awardDom =document.createElement("div")
_awardDom.innerHTML = awardTextArr[i]
_awardDom.setAttribute('class','award-base')
container.appendChild(_awardDom)
awardDomArr.push(_awardDom)
document.getElementById("go").onlick =function(){
getResult();
}
}
}
init()
function getResult(){
const finnalNum = Math.floor(Math.random()*awardTextArr.length)
allStep = finnalNum + 30
resStep =allStep
runControll()
}
function runControll(){
restStep-= 1
if(restStep <0) return;
nowIn+=1
if(nowIn>awardTextArr.length){
nowIn=0;
}
const nextSpeed = initSpeed + (allStep -restStep) * 20
runAnimation(nowIn,nextSpeed)
}
function runAnimation(targetIndex,time){
setTimeout(() => {
let removeIndex = targetIndex -1 ;
if(removeIndex < 0){
removeIndex = awardTextArr.length -1 ;
}
awardDomArr[removeIndex].setAttribute('class',"award-base")
awardDomArr[targetIndex].setAttribute('class',"award-base award-on")
},time)
}
</script>
</body>
</html>
bbb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test {
width: 200px;
padding: 30px 20px;
border: 1px solid red;
position: relative;
}
.test input{
border:none;
width:80%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.closeSpan {
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box">
<input id="selfInput" type="text" placeholder="请输入内容"></input>
<button>确定</button>
</div>
<div style="display:flex" class="container"></div>
<script>
const box = document.getElementById('box')
const inputValue = document.getElementById('selfInput');
const button = document.getElementsByTagName("button")[0];
const container = document.getElementsByClassName('container')
button.addEventListener('click', () => {
//边界查询
const value = inputValue.value
if (value.length === 0) {
alert('null')
return;
}
if (value.length > 10) {
alert('数据过长')
return;
}
// 如何 查找是否有重复的数据 1.获取需要查找的数据 2.查找
const testList = document.getElementsByClassName("test")
// console.log(test)
for (let i = 0; i < testList.length; i++) {
// console.log(value)
// console.log(testList[i].innerText)
if (value === testList[i].innerText) {
alert("值重复了")
return;
}
}
const targetDiv = document.createElement('div');
targetDiv.setAttribute('class', "test")
const spanText = document.createElement('span');
spanText.innerText = value
targetDiv.appendChild(spanText)
// targetDiv.innerText = value
targetDiv.addEventListener('click', () => {
// e.stopPropagation()
const inputDom1 = targetDiv.getElementsByTagName('input')[0]
// console.log(e.target)
// console.log(inputDom1)
if (inputDom1) {
inputDom1.style.display = "block";
} else {
console.log('没有找到 input 元素');
}
inputDom1.focus()
})
const span1 = document.createElement('span')
span1.innerText = 'x'
span1.setAttribute('class', "closeSpan")
// console.log(span1)
span1.onclick = function (e) {
// console.log(e)
e.target.parentNode.remove()
}
const inputDom = document.createElement('input')
inputDom.style.display = 'none'
// inputDom.addEventListener('blur',() => {
// const value = e.target.value;
// const fatherNode= e.target.parentNode;
// const textDom = father.getElementsByClassName('text')[0]
// text.innerText = value
// })
targetDiv.appendChild(inputDom)
targetDiv.appendChild(span1)
container[0].appendChild(targetDiv)
})
</script>
</body>
</html>
cc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.box{
height:100px;
width:100px;
background-color: blue;
}
.rb{
position:fixed;
right:0;
bottom:0;
}
</style>
</head>
<body>
<h1>一个可以变宽，变高，变色，变各种样式的 div</h1>
<h1>通过这个目标操作dom的元素样式、内容</h1>
<div class="box">hello divBox</div>
<br>
<button>变宽</button>
<button>变高</button>
<button>变色</button>
<button>变换内容</button>
<input type="text" value="输入边框代码">
<button>到右下角</button>
<button>恢复</button>
<button>加边框</button>
<script>
const box= document.querySelector('.box');
const btnList = document.getElementsByTagName('button')
const inputValue = document.getElementsByTagName("input")
console.log(btnList);
btnList[0].addEventListener('click',() => {
const _width = box.clientWidth
let changeWidth = _width + 1 + 'px'
box.style.width = changeWidth
})
btnList[1].addEventListener('click',() => {
const _width = box.clientHeight
let changeWidth = _width + 1 + 'px'
box.style.height = changeWidth
})
btnList[2].addEventListener('click',() => {
const ColorList = ['blue','red','yellow','black']
let randomColor = Math.round(Math.random() * 10) % 4
// console.log(randomColor);
box.style.backgroundColor = ColorList[randomColor];
})
btnList[3].addEventListener('click',() => {
//box.innerHTML = `更改后的内容`;
box.innerText = "这是更改后的内容"
})
btnList[4].addEventListener('click',() => {
//通过设置特性来类名
// const oldClass= box.getAttribute('class');
// box.setAttribute('class',oldClass +'cb')
// add remove toggle
box.classList.add("rb")
// box.classList.add()
})
btnList[5].addEventListener('click',() => {
box.classList.remove('rb')
// box.classList.add()
})
btnList[6].addEventListener('click',() => {
// console.log(inputValue)
let value = inputValue[0].value
// console.log(value)
// box.style.border = '3px solid red'
box.style.border = value
})
</script>
</body>
</html>
```