1、登录系统

<!--输入框创建-->
账号:<input class="ipt" type="text"><br>
密码:<input class="ipt" type="password"><br>
验证码:<input id="yz_id" type="text">
<!--验证码创建-->
<div id="yzm">加载中。。请稍候</div>
<!--验证码刷新-->
<button onClick="huan()">看不清,换一张</button>
<!--验证码验证-->
<button onClick="yz()">提交</button><br>
<!--登录-->
<button onClick="denglu()">登录</button>
//全局变量
var n = 0;
//页面加载完成
window.onload=function(){
YZMpaixu();
huan();
}
//随机验证码生成
function YZMpaixu(n=6){
var str = "123456789";
var sjs = "";
for(var i =0;i<n;++i){
sjs += str.substr(Math.random()*str.length,1);
}
document.getElementById('yzm').innerHTML= sjs;
}
//验证码刷新
function huan(){
YZMpaixu(n=6)
}
//验证登陆
function denglu(){
var ipt=document.getElementsByClassName("ipt");
var uid = ipt[0];
var pwd = ipt[1];
var uidval = uid.value;
var pwdval = pwd.value;
if(uidval == "" || pwdval == ""){
alert("账号或密码不能为空!");
return;
}
if(uidval == "admin"){
alert("登录成功!");
}
}
//验证验证码
function yz(){
var YZID=document.getElementById("yz_id");
var yzidval = YZID.value;
if(yzidval == ""){
alert("验证码不能为空!");
return;
}
else if(yzidval == sjs){
alert("正确")
}
else{
alert("输入错误")
}
}

2、36选7  不重复

function buchong(){
var num = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36];
var jiguo = [];//数组定义
var nn = 0;
for(var i =0;i<7;++i){
// 抽取数字
var n = parseInt(Math.random()*num.length);
// 返回抽取数在jieguo数组的首次出现位置,没有返回-1
if(jiguo.indexOf(num[n]) < 0 ){
// 追加数字
jiguo.push(num[n]);
}else{
i--;
}
nn++;
}
console.log(nn);
console.log(jiguo);
}

注;indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到字符串,则返回-1. 

3、多选框

<!--多选框-->
<input class="input" type="checkbox">
<input class="input" type="checkbox">
<input class="input" type="checkbox">
<input class="input" type="checkbox">
<input class="input" type="checkbox">
<input class="input" type="checkbox">
<input class="input" type="checkbox"><br>
<button onClick="quanxuan()" id="button1">全选</button>
<button onClick="fanxuan()">反选</button>
<button onClick="buxuan()">不选</button><br><br><br>
//全选
var ipt = document.getElementsByClassName("input");
function quanxuan(){
for(var i = 0;i<ipt.length;i++){
ipt[i].checked=true;
}
}
//反选
function fanxuan(){
for(var i = 0;i<ipt.length;i++){
if(ipt[i].checked==true){
ipt[i].checked=false;
}
else{
ipt[i].checked=true;
}
}
}
//不选
function buxuan(){
for(var i = 0;i<ipt.length;i++){
ipt[i].checked=false;
}
}

效果

4、轮播图

        <div onMouseOver="stop()" onMouseOut="start()"style="margin: 0 auto;width: 100%;height: 300px;position: absolute;";>
<!-- 图片导入-->
<img id="add" src="1.jpg" alt="" width="80%" height="300px">
<!-- 操作按钮 -->
<button onClick="xia()">上一页</button>
<button onClick="zhong(0)">1</button>
<button onClick="zhong(1)">2</button>
<button onClick="zhong(2)">3</button>
<button onClick="zhong(3)">4</button>
<button onClick="shang()">下一页</button>
</div>
//全局变量
var IntervalObj = null;//计时器对象
var n = 0;//下表定义
var imgPath = ['1.jpg','8.jpg','12.jpg','9.jpg'];
var add = null;//图片定义
//页面加载轮播
window.onload = function(){
add = document.getElementById("add");
// 计时器
IntervalObj = setInterval(function(){
add.src = imgPath[n];
n++;
if(n >= imgPath.length){
n = 0;
}
},1000);
}
//鼠标移上停止
function stop(){
clearInterval(IntervalObj);
}
//移走开始
function start(){
IntervalObj = setInterval(function(){
add.src = imgPath[n];
n++;
if(n >= imgPath.length){
n = 0;
}
},1000);
}
//上一页
function shang(){
n++;
if(n >= imgPath.length){
n = 0;
}
add.src = imgPath[n];
}
//下一页
function xia(){
n--;
if(n <=-1){
n = imgPath.length-1;
}
add.src = imgPath[n];
}
//点击换页
function zhong(nn){
add.src = imgPath[nn];
n = nn;
}

Dom运用2的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路(2)-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. JavaScript基础JavaScript的常用编码惯例(007)

    采用一定的编码惯例,可以使得项目中的代码提到较高的一致性,可读性和可预测性. 1.缩进缩 进可以提高代码的可读性.不过错误的缩进也可能导致代码的误读.有人认为缩进应该使用tab,另外的一些人主张采用4 ...

  2. 为DLL文件添加强名称

    程序在编译时出现类似 "错误 1 程序集生成失败 -- 引用的程序集“XXXXXXXXXX”没有强名称" 这样的错误,是因为它不是强名称的,则需要进行以下操作: 例如:com.so ...

  3. 堆/题解 P3378 【【模板】堆】

    概念: 堆就是一颗二叉树,满足父亲节点总是比儿子节点大(小).因此,堆也分为大根堆和小根堆,大根堆就是父亲节点比儿子节点大,小根堆正好相反.注意加粗的地方,是每一个节点哦!!!!! 还是直接看例题吧, ...

  4. 一个Window/Linux(Fedora测试平台)的CPU,磁盘,内存,PC,进程相关信息采集功能

    说明:采用的是Multi-Byte Character Set,不支持Unicode. Peer2PeerData.h #ifndef _PEER_2_PEER_DATA_H #define _PEE ...

  5. (私人收藏)SQLite 全面手册以及教程

    SQLite 全面手册以及教程 https://pan.baidu.com/s/1VKzCWjF79fAiOLjAlx-3zwnfkp SQLite 全面手册以及教程 SQLite 简介 SQLite ...

  6. Validate表单验证插件之常用参数介绍

    Validate常用的一些参数和方法 1.errorElement 修改显示错误提示信息的HTML标签.默认是<label>,可以指定为<span>.... $("# ...

  7. MySQL实验 内连接优化order by+limit 以及添加索引再次改进

    MySQL实验 内连接优化order by+limit 以及添加索引再次改进 在进行子查询优化双参数limit时我萌生了测试更加符合实际生产需要的ORDER BY + LIMIT的想法,或许我们也可以 ...

  8. 最简单的博弈论——HDU - 5963 朋友 (博弈)

    OK,好的先看一下题意: B君在围观一群男生和一群女生玩游戏,具体来说游戏是这样的: 给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根. ...

  9. CF 1912 A NEKO's Maze Game

    题目传送门 题目描述 输入 输出 样例 样例输入 样例输出 Yes No No No Yes 一句话题意:2*n的迷宫,从(1,1)出发到(2,n),初始时全部的都是地面,每次询问会把一个地面给变成熔 ...

  10. centos7-修改默认python为3

    安装必要工具 yum-utils: $ sudo yum install yum-utils 使用yum-builddep为Python3构建环境,安装缺失的软件依赖,使用下面的命令会自动处理.$ s ...