HTML-JS-CODING
2021-07-18 23:07
标签：new onclick var blur trim idt lap gray lang day28 获取属性 添加元素 高度相关 跑马灯 HTML-JS-CODING 标签：new onclick var blur trim idt lap gray lang 原文地址：http://www.cnblogs.com/ezway/p/7061453.html
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
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">2333333div>
div class="c1" d="1">2333333div>
div class="c1">2333333div>
div class="c1" d="1">2333333div>
div class="c1">2333333div>
div class="c1">2333333div>
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;idivs.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>Titletitle>
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>jijitd>
td>16td>
td>slimtd>
tr>
tr>
td>input class="c1" type="checkbox">
td>
td>jijitd>
td>16td>
td>slimtd>
tr>
tr>
td>input class="c1" type="checkbox">
td>
td>jijitd>
td>16td>
td>slimtd>
tr>
tbody>
table>
script>
function Checkall() {
var tb=document.getElementById(‘tb‘);
var checks=tb.getElementsByClassName(‘c1‘);
for(var i=0;ichecks.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;ichecks.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;ichecks.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>Titletitle>
head>
body>
div>
input type="text">
input type="button" value="add" onclick="Add(this)" onkeydown="Add(this)">
div>
div>
ul id="clis">
li>atmosphereli>
li>cloudli>
ul>
div>
script>
function Add(self) {
var val= self.previousElementSibling.value;
self.previousElementSibling.value=‘‘;
var str=‘‘+val+‘‘;
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>Titletitle>
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>Titletitle>
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>7899789979889h1>
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>Titletitle>
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">wowowoowowowowowowwdiv>
div class="item">cvbcvbcvbnbcvbcvbcvbcvbcbcdiv>
div class="item" style="height: 100px;">lilililiilloliloiliolioiolililidiv>
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;iitem.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 (currentItemWindowTop0 && GobottomH){
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;jlis.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>Titletitle>
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
// 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>