0519
☆getElementsByClassName
getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
<button id="btn" class="btnlist" name="btninfo">按钮button>
var btn=document.getElementsByClassName("btnlist");
console.log(btn[0]);
★getElementsByName
getElementsByName() 方法可返回带有指定名称的对象的集合。
<button id="btn1" class="btnlist" name="btninfo">按钮button>
var btn2=document.getElementById("btn");
console.log(btn2);
☆getElementById
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
var btn2=document.getElementById("btn");
console.log(btn2);
★ getElementsByTagName
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
<button id="btn" class="btnlist" name="btninfo">按钮button>
var btn3=document.getElementsByTagName("button");
console.log(btn3[0]);
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
script>
head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" />
body>
html>
☆querySelector
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
var btn4=document.querySelector(".btnlist");
console.log(btn4);
★querySelectorAll
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
var btn5=document.querySelectorAll("#btn");
console.log(btn5);
☆parseFloat()
parseFloat() 函数可解析一个字符串，并返回一个浮点数。
运行结果
10
10.33
34
60
40
NaN
★parseInt()
parseInt() 函数可解析一个字符串，并返回一个整数。
//我们将使用 parseInt() 来解析不同的字符串
document.write(parseInt("10") + "
");
document.write(parseInt("10.33") + "
");
document.write(parseInt("34 45 66") + "
");
document.write(parseInt(" 60 ") + "
");
document.write(parseInt("40 years") + "
");
document.write(parseInt("He was 40") + "
");
document.write("
");
document.write(parseInt("10",10)+ "
");
document.write(parseInt("010")+ "
");
document.write(parseInt("10",8)+ "
");
document.write(parseInt("0x10")+ "
");
document.write(parseInt("10",16)+ "
");
运行结果
10
10
34
60
40
NaN
10
10
8
16
16
☆charAt()
charAt()方法可返回指定位置的字符。
运行结果
e
将返回位置1的字符
★toUpperCase
toUpperCase() 方法用于把字符串转换为大写。
☆substr()
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
输出
lo world!
输出
lo worl
★splice()
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
//在本例中，我们将创建一个新数组，并向其添加一个元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "
")
arr.splice(2,0,"William")
document.write(arr + "
")
script>
输出
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
☆push()
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
//在本例中，我们将创建一个数组，并通过添加一个元素来改变其长度：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "
")
document.write(arr.push("James") + "
")
document.write(arr)
script>
输出
George,John,Thomas
4
George,John,Thomas,James
★
pageX -= (block.offsetLeft + parseInt(ceng.style.width) / 2);
获取当前元素的偏移量 offsetLeft 左偏移 offsetTop 上偏移
☆parseInt(ceng.style.width)
parselint只取数值不取单位 取该值的时候 width应为行内元素
把style中的width的设置值挪到 行内（跟class名同行）
★
var bigleft = parseInt(this.style.width) - parseInt(ceng.style.width);
pageX = pageX <= 0 ? 0 : (pageX >= bigleft) ? bigleft : pageX;
判断当pageX小于等于0时令pageX取0
判断当pageX大于于等于0时令pageX取bigleft
☆
middleblock.onmouseenter = function () {}
onmouseenter 事件在鼠标指针移动到元素上时触发
middleblock.onmouseleave = function () {}
onmouseenter 事件在鼠标指针离开元素上时触发
★自定义属性
<style>
background-image: url("./img/big1.jpg");
style>
<div class="smalllist" data-middle="middle1.jpg" data-big="big1.jpg">
<img src="./img/small1.jpg" alt=""/>
div>
<script>
//获取当前元素的自定义属性
middleimage.src = "./img/" + this.getAttribute("data-middle");
//当图片设置为某块的背景图时的获取方式
bigblock.style.backgroundImage = "url(./img/" + this.getAttribute("data-big") + ")";
☆NaN
not a number
用来判断输入的是数字还是符号
★innerHTML
innerHTML属性可以设置或者返回指定元素的HTML内容
if (this.innerHTML != ".") {
txtval.value += this.innerHTML;
}
☆
关于script计算器的代码
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid black;
width: 300px;
margin: auto;
border-collapse: collapse;
}
td {
width: 75px;
border: 1px solid black;
}
td > input {
width: 98.5%;
height: 40px;
text-align: right;
font-size: 20px;
outline: none;
}
td > button {
width: 100%;
height: 40px;
font-size: 17px;
}
style>
head>
<body>
<table>
<tr><td colspan="4"><input class="text" type="text" value="0"/>td>tr>
<tr>
<td colspan="2"><button class="btn">delbutton>td>
<td colspan="2"><button class="btn">cbutton>td>
tr>
<tr>
<td><button class="btn">7button>td>
<td><button class="btn">8button>td>
<td><button class="btn">9button>td>
<td><button class="btn">*button>td>
tr>
<tr>
<td><button class="btn">4button>td>
<td><button class="btn">5button>td>
<td><button class="btn">6button>td>
<td><button class="btn">/button>td>
tr>
<tr>
<td><button class="btn">1button>td>
<td><button class="btn">2button>td>
<td><button class="btn">3button>td>
<td><button class="btn">-button>td>
tr>
<tr>
<td><button class="btn">0button>td>
<td><button class="btn">.button>td>
<td><button class="btn">+button>td>
<td><button class="btn">=button>td>
tr>
table>
<script>
/*
* 1.获取所有的按钮
* 2.点击的按钮 值给到文本框
* 3.区分符号数字点
* 4.处理屏幕上显示值的问题
* 5.按符号+ - * / 清屏
* */
var btnlist = document.getElementsByClassName("btn");
// 获取文本框 文本框名 txtval 取集合里第0个
var txtval = document.getElementsByClassName("text")[0];
var res = [];
// 用空数组 存储 输入的值
for (var i = 0; i < btnlist.length; i++) {
btnlist[i].onclick =addclick;
function addclick() {
/*标签的文本值 innerHTML innerText */
if (!isNaN(this.innerHTML) || this.innerHTML == ".")
// 如果是 数字和点的时候可以上屏幕 ||或者
{
if (txtval.value != "0")
// 字符串“0”
// txtval.value获取值 当 value值不等于0的时候
{
if (txtval.value.indexOf(".") != -1)
// indexof检测当前字符是否出现过 不等于-1 点已经出现过
{
if (this.innerHTML != ".")
// 如果当前按的不是点 就拼接上去
{
txtval.value += this.innerHTML;
// +=拼接 不然只可以打一个数字
}
}
else
// 没有点
{
txtval.value += this.innerHTML;
}
}
else
// 当value 值等于0的时候
{
if (this.innerHTML == ".")
// 如果当前输入的值是点
{
txtval.value = "0" + this.innerHTML;
// 则输出 0+点 即0.几
}
else {
txtval.value = this.innerHTML;
// value的值等于0的时候 直接给值 覆盖
}
}
}
else {
//非数字
switch (this.innerHTML) {
case "+":
save(this);
break;
case "-":
save(this);
break;
case "*":
save(this);
break;
case "/":
save(this);
break;
case "=":
res.push(txtval.value);
//计算表达式
//js里面运算表达式的 eval()
// res.join("")数组转化为表达式
// txtval.value = eval(res.join(""));
// 把得到的值给value
console.log(res);
var result=eval(res.join(""));
if(result="Infinity"){
removeroradd("remove");
}
txtval.value=eval(res.join(""))=="Infinity"?"除数不能为0":eval(res.join(""));
// 清空数组
res=[];
break;
case"del":
save(this);
break;
case"c":
txtval.value = "0";
res=[];
removeroradd("add");
break;
}
}
}
}
//计算的方法
function save(obj) {
if(!isfuhao){
res[res.length-1]=obj.innerHTML;
}
else{
res.push(txtval.value);// 存储值
res.push(obj.innerHTML);// 存储运算符
// 不能写 this.innerHTML 函数中的当前对象是window 用 this 传给 function
txtval.value = "0";// 按符号 清0
isfuhao=false;
}
}
//关于C键清空的操作
function removeroradd(r){
for (var i = 0; i < btnlist.length; i++) {
if (r == "add") {
btnlist[i].onclick = addclick;
}
else {
if (btnlist[i].innerHTML != "c") {
btnlist[i].onclick = null;
}
}
}
}
script>
body>
html>
★关于放大镜的代码
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
width: 350px;
height: 510px;
margin: auto;
position: relative;
}
.middle {
position: relative;
border: 1px solid silver;
overflow: hidden;
}
.small{
position: relative;
width: 350px;
height: 110px;
text-align: center;
/*background-color: red;*/
}
.smalllist{
display: inline-block;
/*background-color: red;*/
border: 2px solid transparent;
width: 54px;
height: 55px;
margin: 10px 0px;
}
.hover_ceng {
position: absolute;
width: 220px;
height: 250px;
background: url("./img/bg.png");
background-size: 4px 4px;
z-index: 1;
display: none;
}
.bigblock {
position: absolute;
left: 350px;
top: 0;
width: 350px;
height: 400px;
border: 1px solid silver;
background-repeat: no-repeat;
display: none;
background-image: url("./img/big1.jpg");
}
.small > span {
position: absolute;
top: 15px;
display: block;
width: 20px;
height: 50px;
background: #d9d9d9;
color: #717171;
font-size: 20px;
line-height: 50px;
cursor: pointer;
}
.small > span:nth-child(1) {
left: 0;
}
.small > span:nth-child(3) {
right: 0;
}
.list {
display: inline-block;
width: 250px;
text-align: left;
overflow: hidden;
}
.list > ul {
width: 500px;
height: auto;
overflow: hidden;
transition: all .5s linear;
}
.list > ul > li {
width: 250px;
float: left;
list-style: none;
}
style>
head>
<body>
<div class="block">
<div class="middle" style="width: 350px;height: 400px;">
div>
<img id="middleimg" src="./img/middle1.jpg" width="100%" height="100%" alt=""/>
div>
<div class="small">
<span class="leftbtn"><span>
<div class="list">
<ul class="ulmenu">
<li>
<div class="smalllist" data-middle="middle1.jpg" data-big="big1.jpg"><img src="./img/small1.jpg" width="100%" height="100%" alt=""/>div>
<div class="smalllist" data-middle="middle2.jpg" data-big="big1.jpg"><img src="./img/small2.jpg" width="100%" height="100%" alt=""/>div>
<div class="smalllist" data-middle="middle3.jpg" data-big="big1.jpg"><img src="./img/small3.jpg" width="100%" height="100%" alt=""/>div>
<div class="smalllist" data-middle="middle4.jpg" data-big="big1.jpg"><img src="./img/small4.jpg" width="100%" height="100%" alt=""/>div>
li>
<li>
<div class="smalllist" data-middle="middle1.jpg" data-big="big1.jpg"><img src="./img/small1.jpg" width="100%" height="100%" alt=""/>div>
<div class="smalllist" data-middle="middle2.jpg" data-big="big1.jpg"><img src="./img/small2.jpg" width="100%" height="100%" alt=""/>div>
<div class="smalllist" data-middle="middle3.jpg" data-big="big1.jpg"><img src="./img/small3.jpg" width="100%" height="100%" alt=""/>div>
<div class="smalllist" data-middle="middle4.jpg" data-big="big1.jpg"><img src="./img/small4.jpg" width="100%" height="100%" alt=""/>div>
li>
ul>
div>
<span class="rightbtn">>span>
div>
<div class="bigblock">
div>
div>
<script>
var smallblock=document.getElementsByClassName("smalllist");
var middleimage = document.getElementById("middleimg");
var middleblock = document.getElementsByClassName("middle")[0];
var ceng=document.getElementsByClassName("hover_ceng")[0];
var block = document.getElementsByClassName("block")[0];
//大图
var bigblock = document.getElementsByClassName("bigblock")[0];
//左右滑动
var leftbtn = document.getElementsByClassName("leftbtn")[0];
var rightbtn = document.getElementsByClassName("rightbtn")[0];
var ulmenu = document.getElementsByClassName("ulmenu")[0];
var before=null;
// 小图遇到鼠标变红
for(var i=0;i<smallblock.length;i++){
smallblock[i].onmouseenter=function(){
if(before)before.style.borderColor="transparent";
this.style.borderColor="red";
before=this;
//
this.getAttribute("data-middle","")
middleimage.src = "./img/" + this.getAttribute("data-middle");
bigblock.style.backgroundImage = "url(./img/" + this.getAttribute("data-big") + ")";
}
}
// 小图对应中图 给元素添加自定义属性
middleblock.onmouseenter=function(){
this.style.cursor="move";
ceng.style.display="block";
bigblock.style.display = "block";
}
middleblock.onmouseleave = function () {
ceng.style.display = "none";
bigblock.style.display = "none";
}
middleblock.onmousemove = function (e){
var pageX = e.pageX || e.clientX;
var pageY = e.pageY || e.clientY;
pageX -= (block.offsetLeft + parseInt(ceng.style.width) / 2);// 把左边的数减去右边的数的值赋给左边的数
pageY -= (block.offsetTop + parseInt(ceng.style.height) / 2);
var bigleft = parseInt(this.style.width) - parseInt(ceng.style.width);
var bigtop = parseInt(this.style.height) - parseInt(ceng.style.height);
pageX = pageX <= 0 ? 0 : (pageX >= bigleft) ? bigleft : pageX;
pageY = pageY <= 0 ? 0 : (pageY >= bigtop) ? bigtop : pageY;
ceng.style.left = pageX + "px";
ceng.style.top = pageY + "px";
bigblock.style.backgroundPosition = (-pageX * 2.28) + "px " + (-pageY * 2) + "px";
}
leftbtn.onclick = function () {
ulmenu.style.marginLeft = "0px";
}
rightbtn.onclick = function () {
ulmenu.style.marginLeft = "-250px";
}
script>
body>
html>