代码教程 - 微6g博客【记录生活分享心得】

JavaScript验证value值是否是数字 JavaScript

方法1：使用js自带的全局函数isNaN()

function btn(){
    var a=document.getElementById('num1').value;
    if(isNaN(a)==true)
    {
        alert('不是数字');

    }
}

方法2：使用正则表达式

/**
* 校验只要是数字（包含正负整数，0以及正负浮点数）就返回true
**/
function isNumber(val){

//非负浮点数
var regPos = /^\d+(\.\d+)?$/;

 //负浮点数
var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
    if(regPos.test(val) || regNeg.test(val)){
        return true;
    }else{
        return false;
    }

}

2.1校验正负正数就返回true

/**
* 校验正负正数就返回true
**/
function isIntNum(val){
    var regPos = / ^\d+$/; // 非负整数
    var regNeg = /^\-[1-9][0-9]*$/; // 负整数
    if(regPos.test(val) || regNeg.test(val)){
        return true;
    }else{
        return false;
    }
}

小诸葛验证value值 3-10

评论(0) 浏览(377)

商品结算 JavaScript

效果图

商品结算

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                background-color: #b9b9b9;
            }

            h1 {
                padding: 20px 0;
                text-align: center;
                border-bottom: 1px dashed;
            }

            .sp {
                box-sizing: border-box;
                margin: 0 auto;
                width: 500px;
                background-color: #fff;
                border-radius: 15px;
                box-shadow: 4px 3px 5px #000000;
            }

            input {
                font-size: 16px;
                font-weight: bold;
                padding: 0 10px;
                margin: 5px 0;
                margin-left: 10px;
                width: 200px;
                height: 40px;
                border: 0;
                box-shadow: inset 0px 1px 4px #000000;
                outline-color: #ffffff;
                border-radius: 15px;

            }

            p {
                margin-left: 20px;
                b
            }

            #sum {
                color: #aa0000;
                width: 100px;
            }

            .sp #button {
                text-align: center;
            }

            button {
                border-radius: 5px;
                width: 40%;
                height: 50px;
                border: 0;
                background-color: #55aaff;
                color: #fff;
                box-shadow: 0px 1px 4px #000000;
                margin: 20px 0;
            }

            button:hover {
                box-shadow: inset 0px 1px 4px #000000;
            }

            #freight {
                outline: none;
            }
        </style>
    </head>
    <body>
        <!--    8.  场景题: 小明在网上购物，买了3个笔记本，每个5.78元，商家不包邮，还需要付4元运费，
        但他有一张满10元减2元的优惠券，编程计算出最终小明要支付的金额。请使用变量存储数据，
        变量 num保存数量，price保存价格，freight保存运费，coupon保存优惠券（考点：编程思维、变量使用、运算符） -->
        <div class="sp">
            <h1>商品自助结算页面</h1>
            <p>数量:<input type="text" id="num" placeholder="请输入购买数量"></p>
            <p>价格:<input type="text" id="price" placeholder="请输入价格"></p>
            <p>运费:<input type="text" id="freight" value="4" disabled>&emsp;总价:<input type="text" id="sum" disabled></p>
            <p id="button"> <button id="jes">结算</button></p>
        </div>

        <script type="text/javascript">
            jes.onclick = function() {
                let num = Number(document.getElementById("num").value); //数量
                let price = Number(document.getElementById("price").value); //价格
                let freight = Number(document.getElementById("freight").value); //运费
                let sum = num * price + freight; //根据获取的对应值，计算总价赋值给sum
                if (num == '') { //判断是否输入购买数量
                    alert('请输入购买数量'); //没有输入就弹窗提示

                } else if (price == '') { //判断是否输入购买价格
                    alert('请输入价格'); //没有输入就弹窗提示
                } else if (sum >=10) { //满足以上2个条件执行第三个,判断总价是否满足使用优惠券条件
                    sum = sum - 2;
                    alert('恭喜你已经使用满10元-2元优惠券');
                    document.getElementById("sum").value = sum;
                } else {
                    document.getElementById("sum").value = sum; //满足前2个,不满足第三个,则执行否则[else],然后退出程序return 0
                    return 0; //退出程序
                }
            }
            // 作业
            let num = 3; //数量
            let price = 5.78; //价格
            let freight = 4; //运费
            let coupon = 10; //优惠券
            let sum = num * price + freight; //计算笔记本总价格

            if (sum > coupon) { //判断笔记本总价格是否满足优惠券使用，满足-2。
                sum = sum - 2;
            }  
            console.log('数量：',num,'单价：',price,'运费：',freight,'总价格：', sum); //输出最终价格

           let a=10;
           let b=5;
           let c="5";
           console.log(a==b);
           console.log(b==c);
           console.log(b===c);
           console.log(b!==c);
           console.log(a!=b);
        </script>
    </body>
</html>

小诸葛商品结算 3-9

评论(0) 浏览(392)

计算机四则运算 JavaScript

小诸葛计算器 3-9

评论(0) 浏览(349)

JavaSrcipt的引入四种方式 JavaScript

1.外链式

<script type="text/javascript" src="js/main.js"></script>

2.协议方式

<a href="javascript:alert('我是协议方式!')">点击</a>

3.内嵌式

    <script>
            alert("我是内嵌式"); 
   </script>

4.行内式

<button onclick="alert('我是行内式')">按钮</button>

小诸葛 JavaScript引入 3-8

评论(0) 浏览(359)

闲来无事写了个工具栏前端

效果图

预留了顶部位置准备加图标的，有需要的可以研究，也可以自己改进。

CSS

    /* 小菜单 */
            .nav-fl{
                font-size: 14px;
                width: 726px;
                height: 100px;
                background-color: #ffffff;
                margin: 0 auto;
            }
            /* 菜单下的列表 */
            .nav-fl li{
                width: 120px;
                height: 100px;
                border-right: 1px dashed;
                text-align: center;
                position: relative;
                float: left;
                overflow: hidden;

            }
            /* 菜单下面按钮样式 */
            .nav-fl button{
                width: 60%;
                height:30px;
                border: 0;
                color: #fff;
                background-color: #55aaff;
                margin-top:12px;
                cursor: pointer;
            }
            .nav-fl span:nth-child(1){
                margin-top:40px;
                padding: 5px 0;
                width: 110px;
                display: inline-block;
            }
            /* 菜单下面的列 */
            .nav-fl .cs{
                width: 120px;
                height: 100px;
                background-color:#fff;
                position: absolute;
                transition: all 0.2s;

            }
            .nav-fl li:last-child{
                border-right:0;
            }
            li:hover .cs{
                /* 像上移动 */
                margin-top:-40px;
            }

HTML

<div class="nav-fl">
            <ul>
                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>
                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>
            </ul>
        </div>

小诸葛导航栏 3-7

评论(0) 浏览(374)

nth-child的使用方法前端

废话不说多少先上效果图

图一：
nth-child的使用方法
图二：

仔细观察就会发现图二第二行都没有了下边框，虽然解决办法有很多，比如给每个元素单独添加id选择器和类名选择器去逐一选择，但是这样会很麻烦，代码一多也容易造成代码冗余，这里推荐一种方法可以很快捷的实现上面功能。

.nav-fl li:nth-child(n+4){
               border-bottom: 0;
            }

选择了第四个元素和之后的元素。

更多使用方法如下：

first-child：选择第一个li标签设置字体大小为12px。

li:first-child{
    font-size:12px;
}

last-child：选择最后一个li标签设置字体大小为12px。

li:last-child{
    font-size:12px;
}

nth-child(n)：选择第n个li标签设置字体大小为12px.

li:nth-child(3){
    font-size:12px;
}

nth-child(odd)：选择为奇数li标签设置字体大小为12px，或者通过nth-child(n+1)，nth-child(2n-1) 也可以选择奇数行

li:nth-child(odd){
    font-size:12px;
}

nth-child(even)：选择的偶数行li设置字体大小为12px，或者通过另外的方法选择奇数行：nth-child(2n)

li:nth-child(even){
  font-size:12px;
}

不只是上面的固定写法，还有更灵活的组合方法，例如：

/* 选择前三个元素设置其背景颜色 */
li:nth-child(-n+3){
    background: #5555ff;
}

/* 选择第二个元素以及之后的元素 */
    li:nth-child(n+2){
        background: #0ab1fc;
    }

/* 选择第倒数第3个元素 */
    li:nth-last-child(3){
        background-color: #55007f;
    }

/* 选择倒数第三个以及之前的元素*/
            li:nth-last-child(n+3) {
                background-color: saddlebrown;
            }

/* 选择第一个元素和之后每+1个元素状态，1,3,5...*/
            li:nth-child(2n+1){
                background: red;
            }

方法还有很多，可以看以上案例，通过举一反三去实现自己需要的效果，重要的是思想，看到一个效果不要着急上手，先思考如何去实现，以及实现的细节，其次才是上手。

小诸葛 nth-child 3-7

评论(0) 浏览(367)

定位+隐藏+hover 前端

效果图

CSS

ul {
                list-style: none;
            }

            .linda{
                margin-top: 50px;
                height: 400px;
            }
            .linda li {
                padding: 13px;
                float: left;
            }
            /* 第一个li */
            .linda li:nth-child(1) {
                padding-left: 0;
            }
            /* 最后一个li */
            .linda li:last-child {
                padding-right: 0;
            }

            .linda .img {
                /* 超出隐藏 */
                overflow: hidden;
                /* 绝地定位 */
                position: relative;
                width: 280px;
              }
            /* 给图片设置动画效果 */
            .lid-img {
                transition: all 0.5s;/* 动画 */
                left: 0;
                bottom: 0;
                position: absolute;/* 定位 */
                text-align: center;
                width: 100%;
                height: 0px;/* 初始值0让一开始隐藏 */
                background-color: rgb(23 21 21 / 48%);
            }

            .linda .img:hover .lid-img {
                /* 鼠标移入显示图片盒子,给盒子设置高度 */
                height: 80px;
            }
             /* 给span设置样式 */
            .lid-img span {
              vertical-align:middle;
              display: inline-block;
              margin: 15px 5px;
              width: 50px;
              height: 50px;
              border: solid 1px #fff;
              background: url(images/img-sprite.png) no-repeat;

            }
             /* 这里是第二个span,不用设置别的属性了,因为第一个已经设置了 */
            .lid-img span:nth-child(2) {
                background-position: -42px 0;
            }
             /* 第三个span */
            .lid-img span:nth-child(3) {
                background-position: -85px 0px;
            }

            .linda img {
                /* 以盒子高度为参考,给图片高度100%,但是图片没有对齐盒子底部 */
                vertical-align: bottom;/* 此代码也可以解决底部三像素,底部对齐 */
                width: 100%;
                height: 100%;
            }

HTML

<div class="linda banx ">
            <ul>
                <li>
                    <div class="img">
                        <img src="images/t1.jpg" alt="">
                        <div class="lid-img">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="img">
                        <img src="images/t1.jpg" alt="">
                        <div class="lid-img">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="img">
                        <img src="images/t1.jpg" alt="">
                        <div class="lid-img">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="img">
                        <img src="images/t1.jpg" alt="">
                        <div class="lid-img">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

小诸葛动画 3-6

评论(0) 浏览(396)

解决li转成行内块产生的空格间隙前端

解决li转成行内块产生的空格间隙

使用无序列表做菜单的时候，把li转成行内块，发现li之间有空格间隙，解决办是给ui字体大小设置为0，给li重新定义字体大小。

代码如下：

CSS


            ul {
                background-color: black;
                width: 100%;
                background-color: saddlebrown;
                text-align: center;
                font-size: 0;
            }

            li {
                background-color: white;
                display: inline-block;
                font-size: 16px;
            }

HTML

<ul>
    <li>菜单1</li>
    <li>主页</li>
    <li>日记</li>
    <li>照片</li>
</ul>

小诸葛行内块 3-6

评论(0) 浏览(377)

JavaScript验证value值是否是数字 JavaScript

商品结算 JavaScript

效果图

计算机四则运算 JavaScript

JavaSrcipt的引入四种方式 JavaScript

闲来无事写了个工具栏前端

效果图

nth-child的使用方法前端

废话不说多少先上效果图

定位+隐藏+hover 前端

效果图

解决li转成行内块产生的空格间隙前端

代码如下：

CSS

HTML

I am 小诸葛

最新评论