JS 篇（3）

最新推荐文章于 2023-07-10 23:28:03 发布
最新推荐文章于 2023-07-10 23:28:03 发布
阅读量447 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Dawn___/article/details/61202112

仿淘宝搜索框

这里写图片描述
这里写图片描述

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .search {
    width:300px;
    height: 30px;
    margin: 100px auto;
    position: relative;
    }
    .search input {
    width:200px;
    height:25px;
    }
    .search label {
    font-size: 12px;
    color:#ccc;
    position: absolute;
    top:8px;
    left:20px;
    /*此光标指示文本*/
    cursor: text;
    }
    </style>
    <script>
    window.onload = function(){
    function $(id){return document.getElementById(id);}
    //  oninput 大部分浏览器支持  检测用户表单输入内容
    //  onpropertychange ie678 检测用户表单输入内容
    //  事件是可以连等的btn.onclick=btn.onmouseover
    $("txt").oninput = $("txt").onpropertychange = function(){
    if(this.value ==""){
    $("message").style.display = "block";
    }
    else {                   
    $("message").style.display = "none";
    }
    }
    //$("txt").oninput = function(){
    //if(this.value ==""){
    //$("message").style.display = "block";
    //}
    //else {
    //$("message").style.display = "none";
    //}
    //}
    //$("txt").onpropertychange = function(){
    //if(this.value ==""){
    //$("message").style.display = "block";
    //}
    //else {
    //$("message").style.display = "none";
    //}
    //}
    }
    </script>
    </head>
    <body>
    <div class="search">
    <input type="text" id="txt"/>
    <!--想光标跳到谁身上就放谁的ID,当我们点击label的时候，光标回到input里面-->
    <label for="txt" id="message">必败的国际大牌</label>
    </div>
    </body>
    </html>
判断用户输入事件

正常浏览器支持 :oninput
Ie 678支持的 : onpropertychange

数组的遍历

    <script>
    var num = 10;
    var arr = [1,3,5,6,7];
    console.log(arr[3]);
    //        for(var i=0;i<arr.length;i++)
    //        {
    //            console.log(arr[i]);
    //        }
    for(var i=0,len=arr.length;i<len;i++)
    {
    console.log(arr[i]);
    }
    </script>

隔行变色

原图
这里写图片描述
鼠标经过变色（1）
这里写图片描述
鼠标经过变色（2）
这里写图片描述

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box {
    width: 300px;
    }
    li {
    line-height: 30px;
    list-style-type: none;
    }
    li span {
    margin:5px;
    }
    .current{
    background-color: #ccc!important;
    }
    </style>
    <script>
    window.onload = function(){
    var lis = document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
    if(i%2==0)
    {
    lis[i].style.backgroundColor = "#eee";
    }
    //鼠标经过li的时候，当前的（this）底色变量
    lis[i].onmouseover = function(){
    //！！！！！一定是this不是lis[i]，因为是当前鼠标在的这个li变色！！！！
    this.className = "current";
    }
    lis[i].onmouseout = function(){
    this.className="";
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="box">
    <ul>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    <li>
    <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
    </li>
    </ul>
    </div>
    </body>
    </html>

鼠标经过颜色变深，但是已经有背景色的li未发生变化，因为之前的颜色写在行内式，权重是1000，.current权重是10，所以会被盖住(如图)
这里写图片描述
所以要提高current的权重＋“！important”

求平均值

    <script>
    //    var arr = [1,2,3,4,5,6];
    //    var sum = 0;
    //    for(i=0,leg=arr.length;i<leg;i++){
    //        sum=sum+arr[i];
    //    }
    //    console.log(sum/arr.length)
    var arr= [10,20,30];
    function avg(array){
    var len = array.length;
    var sum = 0;
    for(var i=0; i<len;i++){
    sum+=array[i];
    }
    return sum/len;
    }
    console.log(avg(arr))
    </script>

遍历京东背景图片

这里写图片描述
图片位置坐标以及对应索引号依次为（0，0）->0；（0，-25）->1；（0，-50）->2；得到 坐标=（索引号*25）

在之前的京东网页上继续写JS:

    <script>
    var iis = document.getElementById("iconsprite").getElementsByTagName("i");
    alert(iis.length)
    for(var i=0;i<iis.length;i++){
    iis[i].style.backgroundPosition = "0 "+(-25*i)+"px";
    }
    </script>

如此，图片得到遍历：
这里写图片描述

字符相连

数值相加，字符相连

“0”+10 显示为010
10-“2” 显示为8
也就是说，加号会连，但是减乘除都是当做数字0运算
所有input取过来的值是字符型
将字符型转化成数值型:
var num = Number(txt.value);
var num = parseInt(txt.value);
引引加加：“50px”+i+”px”;
“你好“”+i+“吧”等同于 “你好1”+“吧”（i为任意数值）

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
    //将js写在input的上面需要加window.onload，如果写在input下面，就不需要了，因为程序是从上向下执行
    window.onload = function(){
    var txt = document.getElementById("txt");
    //没有给button的id值，可以用数组写
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function(){
    var num = Number(txt.value);
    alert(num+num);
    }
    }
    </script>
    </head>
    <body>
    <input type="text" id="txt">
    <button>点击</button>
    </body>
    </html>

全选和反选（！！重要！！）

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
    window.onload = function(){
    var btns = document.getElementsByTagName("button"); // 得到了所有的button
    var inputs = document.getElementById("bottom").getElementsByTagName("input");
    // bottom 里面的input
    /*     btns[0].onclick = function(){
    for(var i=0; i<inputs.length;i++)
    {
    inputs[i].checked = true;  // 选中表单
    }
    }
    btns[1].onclick = function(){
    for(var i=0;i<inputs.length;i++)
    {
    inputs[i].checked = false;
    }
    }
    btns[2].onclick = function(){
    for(var i=0;i<inputs.length;i++)
    {
    if(inputs[i].checked == true)
    {
    inputs[i].checked = false;
    }
    else
    {
    inputs[i].checked = true;
    }
    }
    }*/
    /*全选和取消 函数*/
    function all(flag){
    for(var i=0;i<inputs.length;i++)
    {
    inputs[i].checked = flag;
    }
    }
    btns[0].onclick = function(){
    all(true);
    };
    btns[1].onclick = function(){
    all(false);
    };
    btns[2].onclick = function(){
    for(var i=0;i<inputs.length;i++)
    {
    inputs[i].checked == true ?  inputs[i].checked = false : inputs[i].checked = true;
    }
    }
    }
    </script>
    </head>
    <body>
    <div id="top">
    <button>全选</button>
    <button>取消</button>
    <button>反选</button>
    </div>
    <div id="bottom">
    <ul>
    <li>选项: <input type="checkbox"/></li>
    <li>选项: <input type="checkbox"/></li>
    <li>选项: <input type="checkbox"/></li>
    <li>选项: <input type="checkbox"/></li>
    <li>选项: <input type="checkbox"/></li>
    <li>选项: <input type="checkbox"/></li>
    <li>选项: <input type="checkbox"/></li>
    <li>选项: <input type="checkbox"/></li>
    <li>选项: <input type="checkbox"/></li>
    </ul>
    </div>
    </body>
    </html>

排他思想&提出当前索引号

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .damao {
    background-color: pink;
    }
    </style>
    <script>
    window.onload = function(){
    var btns = document.getElementsByTagName("button");
    for(var i=0;i<btns.length;i++)
    {
    btns[i].index = i;  
    // 给每个button定义了一个index属性  索引号
    //如果直接写成index=i;则会出现undefined情况 
    btns[i].onclick = function(){
    //清除所有人的类名，只能用 for 遍历
    alert(this.index);
    for(var j=0;j<btns.length;j++)
    {
    btns[j].className = "";
    }
    //就剩下自己 就是一个 而且是点击那个
    this.className = "damao";
    }
    }
    }
    </script>
    </head>
    <body>
    <button>啦啦啦</button>
    <button>啦啦啦</button>
    <button>啦啦啦</button>
    <button>啦啦啦</button>
    <button>啦啦啦</button>
    <button>啦啦啦</button>
    </body>
    </html>

var index = 2;是变量，谁都可以用
arr.index = 2;是自定义属性，他只能在arr才能使用

Tab栏切换 ★

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box {
    width: 400px;
    margin:100px auto;
    border:1px solid #ccc;
    }
    .bottom div{
    width:100%;
    height: 300px;
    background-color: pink;
    display: none;
    }
    .purple {
    background-color: purple;
    }
    </style>
    <script>
    window.onload = function(){
    var btns = document.getElementsByTagName("button");
    var divs = document.getElementById("divs").getElementsByTagName("div");
    for(var i=0;i<btns.length;i++)
    {
    btns[i].index = i;  // 难点
    btns[i].onclick = function(){
    //让所有的 btn 类名清空
    //alert(this.index);
    for(var j=0;j<btns.length;j++)
    {
    btns[j].className = "";
    }
    // 当前的那个按钮 的添加 类名
    this.className = "purple";
    //先隐藏下面所有的 div盒子
    for(var i=0;i<divs.length;i++)
    {
    divs[i].style.display = "none";
    }
    //留下中意的那个 跟点击的序号有关系的
    divs[this.index].style.display ="block";
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="box">
    <div class="top">
    <button>第一个</button>
    <button>第二个</button>
    <button>第三个</button>
    <button>第四个</button>
    <button>第五个</button>
    </div>
    <div class="bottom" id="divs">
    <div style="display: block;">1好盒子</div>
    <div>2好盒子</div>
    <div>3好盒子</div>
    <div>4好盒子</div>
    <div>5好盒子</div>
    </div>
    </div>
    </body>
    </html>

改进后：

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box {
    width: 400px;
    margin:100px auto;
    border:1px solid #ccc;
    }
    .bottom div{
    width:100%;
    height: 300px;
    background-color: pink;
    display: none;
    }
    .purple {
    background-color: purple;
    }
    .bottom .show {
    display: block;
    }
    </style>
    <script>
    window.onload = function(){
    var btns = document.getElementsByTagName("button");
    var divs = document.getElementById("divs").getElementsByTagName("div");
    for(var i= 0;i<btns.length;i++)
    {
    btns[i].index = i; 
    btns[i].onclick = function(){   
    for(var j=0;j<btns.length;j++)
    {
    btns[j].className = "";
    divs[j].className = "";
    }
    this.className = "purple";
    divs[this.index].className = "show";
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="box">
    <div class="top">
    <button>第一个</button>
    <button>第二个</button>
    <button>第三个</button>
    <button>第四个</button>
    <button>第五个</button>
    </div>
    <div class="bottom" id="divs">
    <div class="show">1好盒子</div>
    <div>2好盒子</div>
    <div>3好盒子</div>
    <div>4好盒子</div>
    <div>5好盒子</div>
    </div>
    </div>
    </body>
    </html>
JavaScript 3D动画库three.js入门篇
cnds123的专栏
10-31 1万+
什么是three.js？你将它理解成three+js，three表示3D的意思，js表示JavaScript的意思，合起来，three.js就是使用JavaScript来写3D程序的意思。three.js是WebGL的一个运行在浏览器上的开源框架，它省去了很多麻烦的细节，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。
JavaScript 3D动画库three.js示例篇
cnds123的专栏
11-16 3714
JavaScript 3D动画库three.js示例篇 本文主要介绍JavaScript 3D动画库three.js示例，关于three.js库基础知识可参见：JavaScript 3D动画库three.js入门篇_cnds123的专栏-优快云博客 通过script标签来引入three.js，又有两种方式： 一是使用CDN（Content Delivery Network，即内容分发网络），如： <script src="https://cdn.bootcss.com/three.js/
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 86万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
threeJs 入门篇
好川的博客
08-08 1万+
1.什么是threeJs 简单的说 ，就是一门 绘制 3D 的 javaScript 轻量级框架； 主要采用 ，HTML5 Canvas提供硬件3D加速渲染； 于是web 端 ，就能制作出 3D 系统 ，访问就能操作 ，十分方便。 文章目录1.什么是threeJsⅠ.为什么要学这门前沿技术Ⅱ.应用场景2. 学习Three .js 入门篇 （一）Ⅰ.安装下载Ⅱ. 创建场景、摄像机、渲染器（画布）Ⅲ. 创建坐标系Ⅳ.平面、立方体、球 的创建Ⅴ. 光源的创建Ⅵ.添加投影Ⅶ.鼠标操控三维场景3. 整合代码 Ⅰ
前端之JavaScript入门篇
Queen_is_king的博客
07-26 3260
JavaScript是一门解释型语言，也是动态语言。所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。而所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术提示。.
arcgis for JavaScript入门篇
qq_69444691的博客
07-10 2522
ArcGIS for JavaScript是一种基于Web的地图开发解决方案，由ESRI公司开发。它允许开发人员在Web应用程序中嵌入交互式地图，并使用JavaScript编写地图应用程序。ArcGIS for JavaScript提供了许多功能强大的API和工具，使开发人员能够创建高度定制的地图应用程序。它支持各种地图数据源，包括ESRI的ArcGIS Online服务、第三方地图服务、以及开发人员自己的数据。
网页制作之JavaScript篇
zuefeng的博客
07-21 3211
独立的语言，浏览器就是他的解释器 JavaScript存在形式： - Head中 <script type="text/javascript"> // javascript代码 alert(123) </script> - 文件中 <script src="common.js"></script> <!DOCTYPE..
javaScript省级联动【JS实战篇】
weixin_48813932的博客
12-25 709
主要实现省市区三个的选择联动
JavaScript基础篇
xiaofan
04-05 2060
JavaScript基础篇 1.JS引入方式 ①嵌入式 //单行注释 /* 多行注释 * / <script type="text/javascript"> alert("我是嵌入在页面内的JS") </script> ②外链式 <script type="text/javascript" src="js/1.js"</script> 1.js如下: alert("我是外部JS") ③行内式 <a href="javascript:alert(
js篇-new实现
weixin_43954075的博客
05-10 4803
js new过程
25.（arcgis api for js篇）arcgis api for js线修改线编辑（SketchViewModel）
07-06
该资源包的执行效果查看地址：...“GIS之家”专栏中的“25.（arcgis api for js篇）arcgis api for js线修改线编辑（SketchViewModel）”。如下载有问题，可联系博主。 解压密码：arcgis
Javascript开发之js压缩篇.pdf
11-16
"Javascript开发之js压缩篇" 本文主要讲述了使用ExtJS库时遇到的问题，即ExtJS庞大的体积如何进行压缩和优化。文章中介绍了两种解决方法：一、使用yui-compressor对js文件进行压缩混淆，二、使用gzip压缩来减少文件...
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。JavaScript不是Java的子集，两者之间没有直接关联。JS起初名为LiveScript，但在...
26.（arcgis api for js篇）arcgis api for js面修改面编辑（SketchViewModel）
07-07
该资源包的执行效果查看地址：...“GIS之家”专栏中的“26.（arcgis api for js篇）arcgis api for js面修改面编辑（SketchViewModel）”。如下载有问题，可联系博主。 解压密码：arcgis
javascript 基础篇1 什么是js 建立第一个js程序
12-09
基于对象，就是不需要指定变量的类型，你给他一个3，它知道是整型，如果给赋值’3’，它就知道是char。 事件驱动，就是单击啊，之类的事件进行驱动。 javascript优点：网页互动性强，简单易用。js主要是基于客户端...
Python爬虫
Dawn
03-22 6426
安装Requests库启动cmd控制台， 安装Requests库（pip install requests） 测试安装效果：启动IDLE >>> import requests >>> r = requests.get("http://www.baidu.com") >>> r.status_code 200 >>> r.encoding = 'utf-8'
CSS实战（2）
Dawn
02-10 952
底部 starthtml部分 <div class="jd-footer"> <div class="service"> <div class="slogen"> <span class="item slogen1"> <img src="images/slogen1.png" alt=""> </span> <span class="item
CSS实战（1）
Dawn
01-19 823
我们以京东首页为模板，使用webstorm做一个网页。项目文件夹我们的网页都应该放到一个文件夹内，即为本地站点。在webstorm中打开→文件→京东网页→确定→当前窗口 建一个Html文件，起名：index一、 规划页面项目文件夹1.首页 index.html2.样式 css文件夹（Base.css或者global.css）3.图片 images文件4.特效 js文件夹在京东网页文件夹下
Java入门
Dawn
01-02 566
编程练习编程练习：实现输出学生年龄的最大值。 要求： 1、 要求通过定义无参带返回值的方法来实现，返回值为最大年龄 2、 方法中将​学生年龄保存在数组 ages 中，数组元素依次为 18 ,23 ,21 ,19 ,25 ,29 ,17 运行效果为： 最大年龄为：29 public class Text01 { //完成 main 方法 public stati
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值