day28
获取属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ip{
color: rgba(0,0,0,0.4);
}
.hide{
display: none;
}
</style>
</head>
<body>
<input type="text" id="1" class="ip" onfocus="Fo(this)" onblur="Bl(this)" value="come on"/>
<input type="button" onclick="Change()" value="change">
<input type="button" onclick="Run()" id="r">
<div id="q">
<div class="c1">2333333</div>
<div class="c1" d="1">2333333</div>
<div class="c1">2333333</div>
<div class="c1" d="1">2333333</div>
<div class="c1">2333333</div>
<div class="c1">2333333</div>
</div>
<script>
function Fo(arg) {
arg.className="";
if (arg.value==‘come on‘){
arg.value="";
}
else {
arg.className="";
}
}
function Bl(arg) {
if (arg.value==‘come on‘ || arg.value.trim()==‘‘){
arg.value="come on";
arg.className="ip";
}
}
function Change() {
var q=document.getElementById(‘q‘);
var divs=q.children;
console.log(divs);
for(var i=0;i<divs.length;i++){
var current_div=divs[i];
var attr=current_div.getAttribute(‘d‘);
console.log(attr);
if(attr==‘1‘){
current_div.innerText=document.getElementById(‘1‘).value;
}
}
}
</script>
</body>
</html>
全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" value="全选" onclick="Checkall();">
<input type="button" value="取消" onclick="Reversall();">
<input type="button" value="反选" onclick="Cancelall();">
</div>
<table>
<thead>
<tr>
<th>喜欢</th>
<th>名字</th>
<th>你的</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input class="c1" type="checkbox">
</td>
<td>jiji</td>
<td>16</td>
<td>slim</td>
</tr>
<tr>
<td><input class="c1" type="checkbox">
</td>
<td>jiji</td>
<td>16</td>
<td>slim</td>
</tr>
<tr>
<td><input class="c1" type="checkbox">
</td>
<td>jiji</td>
<td>16</td>
<td>slim</td>
</tr>
</tbody>
</table>
<script>
function Checkall() {
var tb=document.getElementById(‘tb‘);
var checks=tb.getElementsByClassName(‘c1‘);
for(var i=0;i<checks.length;i++){
var currentc=checks[i];
currentc.checked=true
}
}
function Reversall() {
var tb=document.getElementById(‘tb‘);
var checks=tb.getElementsByClassName(‘c1‘);
for(var i=0;i<checks.length;i++){
var currentc=checks[i];
currentc.checked=false
}
}
function Cancelall() {
var tb=document.getElementById(‘tb‘);
var checks=tb.getElementsByClassName(‘c1‘);
for(var i=0;i<checks.length;i++){
var currentc=checks[i];
if (currentc.checked){
currentc.checked=false;
} else{
currentc.checked=true;
}
}
}
</script>
</body>
</html>
添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text">
<input type="button" value="add" onclick="Add(this)" onkeydown="Add(this)">
</div>
<div>
<ul id="clis">
<li>atmosphere</li>
<li>cloud</li>
</ul>
</div>
<script>
function Add(self) {
var val= self.previousElementSibling.value;
self.previousElementSibling.value=‘‘;
var str=‘<li>‘+val+‘</li>‘;
var clis=document.getElementById(‘clis‘);
clis.insertAdjacentHTML("beforeEnd",str);
clis.appendChild(val)//第二种添加
}
</script>
</body>
</html>
输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.g{
color: lightgray;
}
.b{
color: #000;
}
.w{
background-color: #cccccc;
color: #000;
text-align: center;
font-size: 60px;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入鸡鸡"/>
<!--不是每个浏览器都支持这个-->
<p>当鼠标进入时，移除内容 /n
当鼠标退出时，添加内容</p>
<input id="i" type="text" class="g" value="请输入鸡鸡" onfocus="Focus(this);" onblur="Blur(this)" />
<input type="button" value="change" onclick="Change()" >
<hr>
<div class=‘w‘ id="1" >
来呀~造作呀
</div>
<script>
function Focus(arg){
arg.className="b";
var current_val= arg.value;
console.log(current_val);
if(current_val==‘请输入鸡鸡‘){
arg.value="";
}
}
function Blur(arg) {
var current_val= arg.value;
if(current_val==‘请输入鸡鸡‘||current_val.trim().length==0){
arg.value=‘请输入鸡鸡‘;
arg.className=‘g‘
}
}
function Change() {
d=document.getElementById(‘1‘);
console.log(d_text)
ip=document.getElementById(‘i‘);
ip_text=ip.value;
console.log(ip_text)
if (ip_text !=‘请输入鸡鸡‘){
d.innerText=ip_text
console.log(d_text)
}
}
setInterval( function (){
d=document.getElementById(‘1‘);
d_text=d.innerText;
sub_char=d_text.slice(1,d_text.length);
first_char=d_text[0];
new_str=sub_char+first_char;
d.innerText=new_str
},300);
// setInterval(
// function () {
// var c=document.getElementsById(‘w‘)
// var ip=document.getElementById(‘i‘)
// c_text=c.innerText
// ip_text=ip.value
// }
// )
</script>
</body>
</html>
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.gotop{
position:fixed;
right: 28px;
bottom: 19px;
width: 40px;
height: 40px;
background: #000;
color: #ffffff;
}
.hide{
display: none;
}
</style>
</head>
<body onscroll="Show()">
<div id="i1" style="height: 20000px;">
<h1>7899789979889</h1>
</div>
<div id="i2" class="gotop hide" >
<a onclick="Gtop()">回去</a>
</div>
<script>
function Show() {
var scrolltop=document.body.scrollTop;
var i=document.getElementById(‘i2‘);
if(scrolltop>100){
i.classList.remove(‘hide‘);
}else{
i.classList.add(‘hide‘);
}
}
function Gtop() {
document.body.scrollTop=0
}
</script>
</body>
</html>
高度相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
background-color: #dddddd;
}
.pg-header{
background-color: black;
color: #ffffff;
height: 50px;
}
.pg-body .menu{
position: absolute;
left: 200px;
width: 180px;
background-color: white;
float: left;
}
.pg-body .content{
position: absolute;
right: 200px;
left: 389px;
background-color: white;
float: left;
}
.pg-body .content .item{
height: 900px;
}
.pg-body .fix{
position: fixed;
top: 3px;
}
.active{
background-color: #447e9b;
color: #ffffff;
}
</style>
</head>
<body onscroll="Go();">
<div class="pg-header"></div>
<div class="pg-body">
<div id="menu" class="menu">
<div >第一章</div>
<div>第二章</div>
<div id=‘2‘>第三章</div>
</div>
<div id="content" class="content">
<div class="item">wowowoowowowowowoww</div>
<div class="item">cvbcvbcvbnbcvbcvbcvbcvbcbc</div>
<div class="item" style="height: 100px;">lilililiilloliloiliolioiolilili</div>
<div></div>
</div>
</div>
<script>
function Go() {
var Go=document.body.scrollTop;
var menu=document.getElementById(‘menu‘);
if(Go>50){
// console.log(menu);
// a.classList.add(‘fix‘);
menu.classList.add(‘fix‘)
}else {
menu.classList.remove(‘fix‘)
}
var item= document.getElementById(‘content‘).children
for (var i=0;i<item.length;i++){
var currentItem=item[i];
var currentItemBodyTop=currentItem.offsetTop+currentItem.offsetParent.offsetTop;
var currentItemWindowTop=currentItemBodyTop-Go;
var currentH=currentItem.offsetHeight;
var bottomH=currentItemBodyTop+currentH;
if (currentItemWindowTop<0 && Go<bottomH){
var my=menu.getElementsByTagName(‘div‘)[i];
my.className=‘active‘;
var lis=menu.getElementsByTagName(‘div‘);
var d2=document.getElementById(‘2‘)
d2h=d2.scrollTop
console.log(bottomH,1,Go,d2h )
for (var j=0;j<lis.length;j++){
if(lis[j]==my){
}
else {
lis[j].classList.remove(‘active‘);
}
if (Go>currentH){
lis[j].className=‘‘
d2.className=‘active‘
}
}
break;
}
}
}
</script>
</body>
</html>
跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.g{
background-color: #cccccc;
color: #000;
text-align: center;
font-size: 60px;
}
</style>
</head>
<body>
<div class=‘g‘ id="1">
来呀~造作呀
</div>
<script>
setInterval( function (){
d=document.getElementById(‘1‘);
d_text=d.innerText;
sub_char=d_text.slice(1,d_text.length);
first_char=d_text[0];
new_str=sub_char+first_char;
d.innerText=new_str
},300);
// li=[11,22,33,44]
// for(var l=1;l<10;l++){
// console.log(l)
// }
//面向对象 prototype 原型
function Fc(name,words) {
this.Name =name;
this.Words =words;
}
Fc.prototype={
G: function () {
return this.Name+this.Words
}
};
a=new Fc(‘jiji‘,‘gogogogoge‘);
ret=a.G();
console.log(ret)
</script>
</body>
</html>
时间： 2024-12-09 01:10:35