欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径,也是学习路上的记录。欢迎探讨
分时显示图片
<img src="images/s.gif" alt="">
<div>早上好</div>
var img = document.querySelector('img');
var div = document.querySelector('div');
var date = new Date();
var h = date.getHours();
if(h<12) {
img.src="images/z.gif";
div.innerHTML = "早上好,该起床了";
}else if (h<18) {
img.src="images/x.gif";
div.innerHTML = "下午好,该睡觉了";
}else {
img.src="images/w.gif";
div.innerHTML = "晚上好,该起床了";
}
关闭二维码案例
<div class="box">
二维码
<img src="images/tao.png" alt="">
<i id = 'close-btn'>x</i>
</div>
var box = document.querySelector('.box');
var closebtn = document.querySelector('#close-btn');
closebtn.onclick = function() {
box.style.display = 'none';
}
显示隐藏密码
<div class="box">
<label for="">
<img src="images/close.png" alt="" id='eye'>
<input type="password" id='pwd'>
</label>
</div>
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;
eye.onclick = function () {
if (flag == 0) {
pwd.type = 'text';
eye.src = "images/open.png";
flag = 1;
} else {
pwd.type = 'password';
eye.src = "images/close.png";
flag = 0;
}
};
密码框验证
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入至少6位密码</p>
</div>
var ipt = document.querySelector('input');
var message = document.querySelector('p');
ipt.onblur = function () {
if (this.value.length < 6 || this.value.length > 16) {
message.className = 'message change';
message.innerHTML = '请输入6~16位密码'
} else {
message.className = 'message right';
message.innerHTML = '输入正确'
}
}
修改元素内容
<button>点击查看时间</button>
<div>时间</div>
<p>时间</p>
// 获取元素、注册事件
var btn = document.querySelector('button');
var di = document.querySelector('div');
btn.onclick = function () {
di.innerHTML = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var date1 = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
var day = date.getDay();
var h = date.getHours();
h = h < 10 ? '0' + h : h;
var m = date.getMinutes();
m = m < 10 ? '0' + m : m;
var s = date.getSeconds();
s = s < 10 ? '0' + s : s;
return '今天是:' + year + '年' + month + '月' + date1 + '日' + arr[day] + h + ':' + m + ':' + s;
}
//元素可以不添加事件
var p = document.querySelector('p');
p.innerHTML = getDate();
修改元素属性:切换图片
<button id='tu1'>图片一</button>
<button id='tu2'>图片二</button> <br>
<img src="images/质感.png" alt="" title="质感">
var tu1 = document.getElementById('tu1');
var tu2 = document.getElementById('tu2');
var img = document.querySelector('img');
tu2.onclick = function () {
img.src = "images/dzq.jpg";
img.title = "邓紫棋";
}
tu1.onclick = function () {
img.src = "images/质感.png";
img.title = "质感";
}
循环精灵图
<div>
<ul>
<li></li><li></li><li></li> <li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
var lis = document.querySelectorAll('li');
for (var i = 0; i <= lis.length; i++) {
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' +index +'px';
}
换肤效果
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for(var i=0;i<imgs.length;i++) {
imgs[i].onclick = function() {
document.body.style.backgroundImage ='url('+ this.src +')';
}
}
表格各行换色
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.className = 'bg';
}
trs[i].onmouseout = function() {
this.className = '';
}
}
全选与反选
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
</tbody>
</table>
</div>
var j_cbAll = document.getElementById('j_cbAll');
var j_tb = document.getElementById('j_tb').getElementsByTagName('input');
j_cbAll.onclick = function () {
for (var i = 0; i < j_tb.length; i++) {
j_tb[i].checked = this.checked;
}
}
for (var i = 0; i < j_tb.length; i++) {
j_tb[i].onclick = function () {
var flag = true;
for (var i = 0; i < j_tb.length; i++) {
if (!j_tb[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
- 点赞加关注,持续更新实用技巧、热门资源、软件教程等
- 有任何 软件 影视 教程资源 考证资料等需求留言即可