前端学习day10：js第五天
2019-04-03 19:08
405 查看
操作样式：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
/*行外样式*/
.box {
opacity: 0.6;
}
/*做一个衣服 写一个类样式*/
.cloth {
width: 200px;
height: 200px;
background-color: yellow;
border-radius: 50%;
margin-left: 50px;
}
/*
*
* 对象.className = 'cloth'
缺点： 会覆盖原来样式 你就原来样式有写上
----》 h5
操作样式的方法
*/
</style>
</head>
<body>
<button>穿上衣服</button>
<button>脱掉衣服</button>
<div class="box" ></div>
<!--js如何获取文本外部的样式
js如何设置文本外部的样式
-->
<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<script>
//200*200 蓝色 文字 水平居中 白色 盒子阴影 变圆
var box = my$('.box')
/* box.style.width = '200px'
box.style.height = '200px'
box.style.backgroundColor = 'yellow'
不好 直接添加到行内
*/
// style仅仅保存元素在行内的样式
var btn1 = my$('button:first-of-type')
var btn2 = my$('button:nth-of-type(2)')
console.log(btn1,btn2)
btn1.onclick = getCloth;
function getCloth() {
/*给div外部样式 添加一件衣服*/
//className = 'cloth' ? 不爽
my$('.box').className = ' box cloth '
}
btn2.onclick = getoffCloth;
function getoffCloth() {
my$('.box').className = 'box'
}
</script>
</body>
</html>
切换样式案例：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.box {
/*静态 */
width: 200px;
height: 200px;
background-color: #a71d5d;
border-radius: 50%;
margin: 100px auto;
}
/*衣服显示和隐藏*/
/*显示*/
.show {
display: block;
}
/*隐藏*/
.hide {
display: none;
}
</style>
</head>
<body>
<button>隐藏</button>
<!--<button>隐藏</button>-->
<div class="box"></div>
<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<script>
/*js 改变的是动态样式*/
var btn = my$('button:first-of-type')
/* var hide = my$('button:last-of-type')*/
var flag =false ; //圆显示
btn.onclick = function () {
//false
if(!flag){ //显示
my$('.box').className = 'box hide'
btn.innerText = '显示'
flag = true ;
}
else {
my$('.box').className = 'box show'
btn.innerText = '隐藏'
flag = false ;
}
}
</script>
</body>
</html>
表单验证：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<link rel="stylesheet" href="../../Documents/Tencent%20Files/419538402/FileRecv/day10/font/iconfont.css">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
form {
width: 500px;
height: auto;
margin: 0 auto;
}
form fieldset {
padding: 20px 30px;
}
input {
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
display: none;
}
span[class*="iconfont icon-"] { /*选中类名以icon-开头的元素*/
margin-left: 30px;
font-size: 20px;
color: #55a532;
/*隐藏*/
visibility: hidden;
}
</style>
</head>
<body>
<form action="" method="" name="myform">
<fieldset>
<legend>学生档案</legend>
<!--label 标签起到点击文字自动聚焦的效果-->
<!-- <label for="userpasswd">姓名:</label>-->
姓名:<input type="text" name="username" id="username" autofocus>
<span class="iconfont icon-check-circle" id="name-icon"></span><br> <!--对勾-->
<p id="nametips">请输入2--6位字符</p>
密码:<input type="password" name="userpasswd" id="userpasswd">
<span class="iconfont icon-check-circle"></span><br>
<p id="passtips">6-16位数字或字母</p>
电话号: <input type="text" name="telnumber">
<span class="iconfont icon-check-circle"></span><br>
<p id="teltips">请输入11位数字</p>
邮箱: <input type="text" name="useremail"><br>
<p id="emailtips">请输入地球人能识别的邮箱</p>
身份证: <input type="text" name="userid"><br>
<p id="idtips">请输入合法身份证</p>
<input type="submit">
<input type="reset">
</fieldset>
</form>
<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<script>
window.onload = function () {
//1获取表单元素 监听用户如若填写完毕 ---》离焦 ---》js判断是否符合规则
var form = document.myform;
var username = form.username //form.name 属性名 姓名对应元素
var telnumber = form.telnumber
//onblur 离焦 onfocus 聚焦
username.onblur = function () {
//获取用户输入的值进行验证
var userInput_name = username.value
var nameReg = /^[\u4e00-\u9fa5]{2,6}$/g //不加引号 表达式
console.log(userInput_name) //正则表达式匹配 如果test方法 返回true 则符合规定
//将p元素的文本改变成绿色的您的输入符合规则
//如果返回false 则p显示 文字变成红色
if(!nameReg.test(userInput_name)){ //不符合规则
my$('#nametips').style.display = 'block' //显示
my$('#nametips').style.color = 'red'
//切换图标类为X icon-close-circle
my$('#name-icon').setAttribute('class','iconfont icon-close-circle')
my$('#name-icon').style.visibility = 'visible'
my$('#name-icon').style.color = 'red'
return false;
}
else {
my$('#nametips').style.display = 'block' //显示
my$('#nametips').innerText = '通过验证'
my$('#nametips').style.color = 'green'
my$('#name-icon').style.visibility = 'visibl
4000
e'
return true;
}
}
telnumber.onblur = function () {
var userInput_tel = telnumber.value
var telReg =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
//不加引号 表达式
//正则表达式匹配 如果test方法 返回true 则符合规定
//将p元素的文本改变成绿色的您的输入符合规则
//如果返回false 则p显示 文字变成红色
if(!telReg.test(userInput_tel)){ //不符合规则
my$('#teltips').style.display = 'block' //显示
my$('#teltips').style.color = 'red'
}
else {
my$('#teltips').style.display = 'block' //显示
my$('#teltips').innerText = '通过验证'
my$('#teltips').style.color = 'green'
}
}
}
</script>
</body>
</html>
放大镜：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.smallBox {
position: relative;
width: 400px;
height: 250px;
margin-left: 100px;
margin-top: 100px;
float: left;
}
.smallBox img {
width: 400px;
}
.bigBox {
position: relative;
width: 800px;
height: 500px;
margin-left: 50px;
margin-top: 100px;
float: left;
border: 1px solid #ccc ;
overflow: hidden;
/* display: none;*/
}
.move {
position: absolute;
left:0;
top:0;
width: 120px;
height: 120px;
background-color: rgba(234,23,56,0.4);
/*display: none;*/
}
#bigPic {
position: absolute;
left: 0;
top:0;
}
</style>
</head>
<body>
<!--小盒子-->
<div class="smallBox">
<img src="../../Documents/Tencent%20Files/419538402/FileRecv/day10/images/2-small.jpg" alt="" id="smallPic">
<div class="move"></div>
</div>
<div class="bigBox">
<img src="../../Documents/Tencent%20Files/419538402/FileRecv/day10/images/2-big.jpg" alt="" id="bigPic">
</div>
<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<script>
/*
offsetleft offsetTop
有绝对定位属性的： 他获取的是距离父元素左上角的距离值
没有绝对定位属性 他获取的是距离body 左上角的距离值
* offsetWidth
* offsetHeight --->盒模型总高
*
* */
window.onload = function () {
var smallBox = my$('.smallBox') //小盒子
var move = my$('.move') //运动元素
var bigBox = my$('.bigBox') //大盒子
var bigPic = my$('#bigPic') //大照片
/*
* 1:阴影块随着鼠标动---》获取鼠标位置
*
* */
//鼠标移入显示
/*smallBox.onmouseover = function(){
//让move和大盒子显示
move.style.display = 'block'
bigBox.style.display = 'block'
}
//鼠标移开消失
smallBox.onmouseout = function(){
move.style.display = 'none'
bigBox.style.display = 'none'
}
*/
//鼠标在小照片盒子上运动
smallBox.onmousemove = function (e) {
//将鼠标变为移动样式
this.style.cursor = 'move'
console.log(e.clientX)
//先判断此时偏移量到底满足条件与否 如果不满足不赋值
//只需要判断超出边界的情况 水平运动 最小值 0
// 最大值 smallBox.offsetWidth-move.offsetWidth
var newLeft = e.clientX-smallBox.offsetLeft-move.offsetWidth/2;
var newTop = e.clientY-smallBox.offsetTop-move.offsetHeight/2;
if(newLeft < 0){
newLeft = 0;
}
if(newLeft > smallBox.offsetWidth-move.offsetWidth ){
newLeft = smallBox.offsetWidth-move.offsetWidth
}
if(newTop < 0){
newTop = 0;
}
if(newTop > smallBox.offsetHeight-move.offsetHeight ){
newTop = smallBox.offsetHeight-move.offsetHeight
}
move.style.left = newLeft +'px'
move.style.top = newTop +'px'
/******计算比例
* 比例=小图宽度/大图宽度 pass
* 小盒子/大盒子 pass
*
* （3）宽比例 move的宽度-小盒子的宽度 /大盒子的宽度-大照片的宽度
* （4）高比例move的高度-小盒子的高度 /大盒子的高度-大照片的高度
*
* ******/
var widthRate = (my$('.move').offsetWidth -smallBox.offsetWidth)/
(bigBox.offsetWidth-bigPic.offsetWidth) ;
var heightRate = (my$('.move').offsetHeight -smallBox.offsetHeight)/
(bigBox.offsetHeight-bigPic.offsetHeight) ;
bigPic.style.left = -parseInt(move.style.left) / widthRate +'px'
bigPic.style.top = -parseInt(move.style.top) / heightRate +'px'
}
}
</script>
</body>
</html>
鼠标位置值的获取：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
img {
position: absolute;
left: 0;
top:0;
width: 40px;
height: 40px;
border: 2px solid #ccc; /*//Width :44px*/
}
</style>
</head>
<body>
<img src="../../Documents/Tencent%20Files/419538402/FileRecv/day10/images/xts.jpg" alt="">
<script>
/*js 获取一个元素的盒模型宽度 = width +border*2 +padding*2
对象.offsetWidth
* 高度 对象.offsetHeight
*
*
* */
console.log(document.body)
var img = document.getElementsByTagName('img')[0]
console.log(img.offsetWidth);
document.onmousemove = function (e) {
//获取鼠标坐标 事件对象 e 保存着事件的具体信息
img.style.left = e.clientX -img.offsetWidth/2+'px' ;
img.style.top = e.clientY -img.offsetHeight/2+'px';
console.log(e.clientX,e.clientY)
}
</script>
</body>
</html>
BOM中的常用对象：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<button>前进</button>
<button>后退</button>
<script>
/*
window.location 保存url具体信息
location.href ----》整个地址栏地址
location.query ?后面的字符串
location.search 包含？以及?后的字符串
history 历史记录 go() back()
*
*
*
* */
var btn1 = document.querySelector('button:first-child')
btn1.onclick = function () {
window.location.href = '07-test.html'
}
</script>
</body>
</html>
随机验证码：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.test {
width: 180px;
height: 40px;
line-height: 40px;
background-color: #808080;
font-weight: 800;
margin: 100px auto;
font-size: 20px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<div class="test">
<span>G</span>
<span>h</span>
<span>j</span>
<span>k</span>
</div>
<script>
window.onload = function () {
var spans = my$All('.test span')
var code = ['a','b','c','d','e','A','J','H','O','P','U'] // 11
//产生0-11的随机数 Math.random() 0-1小数 [) [0-11) 10.3-->向下取整
var RanColor = ['red','purple','brown','black','#fff','#234567','#777','#222','#FFE'
,'yellow','pink']
my$('.test').onclick = function () {
//1：产生随机字母 4个 循环放到span标签里
for(var i =0;i<4;i++){
var num =Math.floor( Math.random()*11) //下标 0-10
var num1 =Math.floor( Math.random()*11) //下标 0-10
spans[i].innerText = code[num] //随机字母赋值到span标签里
spans[i].style.color = RanColor[num1]
}
}
}
</script>
</body>
</html>
放大镜：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.smallBox {
position: relative;
width: 400px;
height: 250px;
margin-left: 100px;
margin-top: 100px;
float: left;
}
.smallBox img {
width: 400px;
}
.bigBox {
position: relative;
width: 800px;
height: 500px;
margin-left: 50px;
margin-top: 100px;
float: left;
border: 1px solid #ccc ;
overflow: hidden;
}
.move {
position: absolute;
left:0;
top:0;
width: 120px;
height: 120px;
background-color: rgba(234,23,56,0.4);
}
#bigPic {
position: absolute;
left: 0;
top:0;
}
</style>
</head>
<body>
<div class="smallBox">
<img src="images/2-small.jpg" alt="" id="smallPic">
<div class="move"></div>
</div>
<div class="bigBox">
<img src="images/2-big.jpg" alt="" id="bigPic">
</div>
<script>
window.onload = function () {
var movediv = document.getElementsByClassName('move')[0]
document.onmousemove = function (e) {
movediv.style.left = e.clientX -movediv.offsetWidth/2-100+'px' ;
movediv.style.top = e.clientY -movediv.offsetHeight/2-100+'px';
console.log(movediv.style.left,movediv.style.top)
if ((e.clientX -movediv.offsetWidth/2-100)<0){
movediv.style.left=0+'px'
}
if ((e.clientX -movediv.offsetWidth/2-100)>400-120){
movediv.style.left=400-120+'px'
}
if ((e.clientY -movediv.offsetHeight/2-100)<0){
movediv.style.top=0+'px'
}
if ((e.clientY -movediv.offsetHeight/2-100)>250-120){
movediv.style.top=250-120+'px'
}
}
}
</script>
</body>
</html>
隐藏显示：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:200px;
height:200px;
background-color: #00a4ff;
}
.show {
display: block;
}
.hidd {
display: none;
}
</style>
</head>
<body>
<button>隐藏</button>
<div class="box"></div>
<script src="../day39/获取元素.js"></script>
<script>
var but = my$('button')
// var show =my('.show')
// var hidd =my$('.hidd')
// var box = my$('.box')
var flag=0
but.onclick=function () {
if(flag===0){
but.innerText='显示'
flag=1
// box.style.opacity='0';
my$('.box').className='box hidd'
console.log(flag)
}
else if (flag===1){
but.innerText='隐藏'
flag=0
// box.style.opacity='1';
my$('.box').className='box show'
console.log(flag)
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【前端】HTML、CSS、JS、PHP 的学习顺序
- 前端开发入门:框架篇-ReactJS入门学习
- 【前端学习笔记】JS学习基础
- 【前端】【JS】前端学习之路（六）：DOM练习（一）（排他功能/innerText&value/className改变类样式）
- 转行前端自学学习记录——JS闭包
- 前端学习（四）：Vue CLI要求Node.js版本8或更高版本（建议使用8.10.0+）。
- 常用的前端工具，js插件，前端书籍，学习网址收集
- 前端学习笔记3-js
- 【前端】【JS】前端学习之路（五）：JS基本语法（课间练习）
- Vue.js学习（五）：vue+axios+php+mysql 实现前端界面数据动态更新
- 转行前端自我学习养成记之js学习记录篇——表单杂记
- 我记录学习研究之前端开发二（js基于1.8版）
- 前端学习笔记 -- Node.js
- javaweb学习第五天，用js实现“在标签末尾添加一个节点”
- JS 等前端学习。
- 前端学习之js函数
- 【前端】【JS】前端学习之路（四）：JS基本语法（构造函数）
- 从零开始前端学习[53]:js中的获取元素的方式
- 前端学习js基础第一天
- web前端开发学习-css,js