# 前端基础案例

**Repository Path**: stonebox/web-basic-cases

## Basic Information

- **Project Name**: 前端基础案例
- **Description**: 基于HTML、CSS、Javascript的基础案例，为便于记忆和查找，文件均采用中文命名。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-01-24
- **Last Updated**: 2024-01-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端基础案例

### 介绍
基于HTML、CSS、Javascript的基础案例，为便于记忆和查找，文件均采用中文命名。

### 目录

#### HTML和CSS案例

##### 01浮动布局案例

需求：利用浮动进行页面布局

![image-20231206123503963](README.assets/image-20231206123503963.png)

##### 02粘性定位案例

需求：窗口滚动到相应区域标题固定，超出区域则隐藏

![image-20231206123717349](README.assets/image-20231206123717349.png)

##### 03元素居中方式

```css
			/* 方案一：定位+变换 */
            /* position: relative; */

            /* 方案二：flex布局+margin：auto */
            /* display: flex; */

            /* 方案三：flex布局 */
            /* display: flex;
            justify-content: center;
            align-items: center; */
```

##### 04过渡案例

需求：鼠标悬浮于图片显示文字阴影效果，背景图片旋转

![image-20231206124144931](README.assets/image-20231206124144931.png)

##### 05动画案例

需求：骑自行车动画效果

![image-20231206124333532](README.assets/image-20231206124333532.png)

##### 06伸缩盒模型案例

需求：使用flex布局渲染页面

![image-20231206124435007](README.assets/image-20231206124435007.png)

#### Javascript案例

##### 01书写位置

js书写位置

##### 02输出

```js
		// document.getElementById("demo").innerHTML=5+8;
        // document.write(5+6);
        // window.alert(5+6);
        // console.log(5+6);
        // alert('你好js')
```

##### 03综合案例渲染表格

需求：提示框输入商品名称、价格、数量、收货地址，计算总价并以表格形式展示

![image-20231206124754693](README.assets/image-20231206124754693.png)

##### 04数字补0

```js
        let num=prompt('输入数字')
        num = num<10?0+num:num
        alert(num)
```

##### 05简单计算器

```js
		let num1=+prompt('输入一个数字')
        let str=prompt('输入运算符')
        let num2=+prompt('输入一个数字')
        switch (str) {
            case '+':
                alert(num1+num2)
                break;
            case '-':
                alert(num1-num2)
                break;
            case '*':
                alert(num1*num2)
                break;
            case '/':
                alert(num1/num2)
                break;
        
            default:
                alert(false)
                break;
        }
```

##### 06简单取款机

```js
 		let money = 1000
        while (true) {
            let op = +prompt(`
                请选择：
                    1、存钱
                    2、取钱
                    3、查看余额
                    4、退出
            `)
            if(op===4){
                break
            }
            switch (op) {
                case 1:
                    let cun = +prompt('存钱金额')
                    money+=cun
                    break;
                case 2:
                    let qu = +prompt('取钱金额')
                    money-=qu
                    break;
                case 3:
                    alert(money)
                    break;
            
                default:
                    alert('请选择1-4')
                    break;
            }
        }
```

##### 07综合案例渲染柱形图

需求：根据输入数据渲染柱形图

![image-20231206125328577](README.assets/image-20231206125328577.png)

##### 08冒泡排序

```js
function getSort(arr) {
            for (let i = 0; i < arr.length - 1; i++) {
                for (let j = 0; j < arr.length - 1 - i; j++) {
                    if (arr[j] > arr[j + 1]) {
                        let temp = 0;
                        temp = arr[j]
                        arr[j] = arr[j + 1]
                        arr[j + 1] = temp
                    }
                }
            }
            return arr
        }
```

##### 09时间转换

```js
let second = prompt('输入秒数：')
        function getTime(t){
            let h=parseInt(t/60/60%24)
            let m=parseInt(t/60%60)
            let s=parseInt(t%60)
            h=h<10?'0'+h:h
            m=m<10?'0'+m:m
            s=s<10?'0'+s:s
            return `转换后的时间为${h}时${m}分${s}秒`
        }
        let str=getTime(second)
        document.write(str)
```

##### 10猜数字游戏

```js
// 最多猜三次
        let flag = true
        for (let i = 0; i < 3; i++) {
            let num = +prompt('请输入1-10之间的数字')
            if (num > random) {
                alert('猜大了')
            } else if (num < random) {
                alert('猜小了')
            } else {
                flag=false
                alert('猜对了')
                break
            }
        }
        if(flag){
            alert('次数已用完')
        }
```

##### 11随机颜色案例

```js
function getColor(flag=true){
            if(flag){
                let str='#'
                let arr=					       ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
                for(let i=0;i<6;i++){
                    let random=Math.floor(Math.random()*arr.length)
                    str+=arr[random]
                }
                return str
            }else{
                let r=Math.floor(Math.random()*256)
                let g=Math.floor(Math.random()*256)
                let b=Math.floor(Math.random()*256)
                return `rgb(${r},${g},${b})`
            }
        }
        
        console.log(getColor(true))
```

##### 12dom随机抽奖

![image-20231206130546666](README.assets/image-20231206130546666.png)

##### 13dom轮播图

需求：1、图片每隔1.5s自动切换 2、标题和小圆点切换为当前图片 3、鼠标悬浮图片定制播放 4、左右按钮切换图片

![image-20231206130648322](README.assets/image-20231206130648322.png)

##### 14定时器

需求：确定按钮5s后方可点击

![image-20231206131109411](README.assets/image-20231206131109411.png)

##### 15随机点名案例

需求：1、点击开始按钮动态随机显示姓名 2、点击结束显示随机姓名 3、已点过名的不能再次点名

![image-20231206131210516](README.assets/image-20231206131210516.png)

##### 16小米搜索框

需求：搜索框输入显示搜索提示

![image-20231206131502343](README.assets/image-20231206131502343.png)

##### 17发布评论案例

需求：1、鼠标悬浮文本框，高度增加 2、文本框获取焦点显示字数统计  3、按下回车或点击发布按钮，显示发布的信息

![image-20231206131628923](README.assets/image-20231206131628923.png)

##### 18tab切换案例

需求：鼠标经过tab栏链接变为红色，内容随之更换

![image-20231206132011054](README.assets/image-20231206132011054.png)

##### 19全选按钮案例

![image-20231206132238440](README.assets/image-20231206132238440.png)

##### 20事件委托

```html
<ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
        <li>第四个元素</li>
        <li>第五个元素</li>
        <p>p标签</p>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        ul.addEventListener('click',function(e){
            if(e.target.tagName==='LI')
            e.target.style.color='red'
        })
    </script>
```

##### 21仿新浪固定头部

需求：页面滚动超过指定位置显示头部导航条

![image-20231206132417600](README.assets/image-20231206132417600.png)

##### 22点击链接滑块滑动效果

需求：点击导航链接样式改变，下方滑块滑动到链接下方

![image-20231206132531335](README.assets/image-20231206132531335.png)

##### 23电梯导航案例

需求：页面滑动超出头部区域显示电梯导航，点击相关楼层，页面定位到指定楼层

![image-20231206132713281](README.assets/image-20231206132713281.png)

##### 24日期

```js
 const date=new Date()
        // document.write(date.toLocaleDateString())//2023/11/30
        // document.write(date.toDateString())//Thu Nov 30 2023
        // document.write(date.toLocaleString())//2023/11/30 16:33:28
        // document.write(date.toLocaleTimeString())//16:33:51
```

##### 25倒计时案例

![image-20231206133137130](README.assets/image-20231206133137130.png)

##### 26学生信息管理

需求：1、录入数据不能为空  2、点击录入表格显示录入信息  3、点击删除，删除学生信息

![image-20231206133252597](README.assets/image-20231206133252597.png)

##### 27正则表达式表单验证

```html
用户名：<input type="text">
    <span></span>
    <script>
        const s=document.querySelector('[type=text]')
        s.addEventListener('blur',function(){
            document.querySelector('span').innerHTML=/^[a-zA-Z0-9-_]{6,}$/.test(s.value)
            
        })
    </script>
```

##### 28注册案例

![image-20231206133633358](README.assets/image-20231206133633358.png)

##### 29登录案例

![image-20231206133700589](README.assets/image-20231206133700589.png)

##### 30放大镜案例

需求：1、鼠标经过小盒子，右侧盒子图片更换  2、鼠标悬浮右侧盒子显示黑色遮罩 ，遮罩跟随鼠标移动   3、右侧显示遮罩部分放大效果

![image-20231206133825580](README.assets/image-20231206133825580.png)

![image-20231206133846651](README.assets/image-20231206133846651.png)

##### 31js进阶-闭包

```js
<script>
        function outer(){
            let a=11
            function inner(){
                console.log(a);
            }
            inner()
        }
        outer()
    </script>
```

##### 32渲染页面

![image-20231206134209948](README.assets/image-20231206134209948.png)

##### 33价格筛选商品

需求：点击价格区间，显示价格区间内的商品

![image-20231206134305958](README.assets/image-20231206134305958.png)

##### 34购物车案例

需求：根据给定数据渲染购物车页面

![image-20231206134424424](README.assets/image-20231206134424424.png)

##### 35扩展数组方法

```js
 const arr=[1,2,3,4,5]
        // 返回数组最大值
        Array.prototype.max = function(){
            return Math.max(...this)
        }
        // 返回数组最小值
        Array.prototype.min = function(){
            return Math.min(...this)
        }
        // 返回数组求和
        Array.prototype.sum=function(){
            return this.reduce((prep,item)=>prep+item,0)
        }
        console.log(arr.max());
        console.log(arr.min());
        console.log(arr.sum());
```

##### 36模态框封装

需求：点击按钮，显示提示信息。点击“x”号关闭提示信息

![image-20231206134549949](README.assets/image-20231206134549949.png)

##### 37深拷贝

```js
<script>
    // 旧对象
    const obj={
        name: 'zhangsan',
        age: 12,
        hobby: ['篮球','足球'],
        msg: {height: '175cm',weight: '68kg'}
    }
    // // 1、使用递归实现
    // // 新对象
    // const newObj={}
    // // 拷贝方法
    // function deepCopy(newObj,oldObj){
    //     // 遍历对象
    //     for(let k in oldObj){
    //         // 如果是数组或对象就递归
    //         if(oldObj[k] instanceof Array){
    //             newObj[k]=[]
    //             deepCopy(newObj[k],oldObj[k])
    //         }else if(oldObj[k] instanceof Object){
    //             newObj[k]={}
    //             deepCopy(newObj[k],oldObj[k])
    //         }
    //         else{
    //             newObj[k]=oldObj[k]
    //         }
            
    //     }
    // }
    // deepCopy(newObj,obj)

    // 2、使用lodash.js实现
    // const newObj =_.cloneDeep(obj)

    // 3、把对象转换为Json字符串
    const newObj=JSON.parse(JSON.stringify(obj))
    newObj.name='aa'
    newObj.hobby[0]='网球'
    newObj.msg['height']='180cm'
    console.log(obj);
    console.log(newObj);
    </script>
```

##### 38显示鼠标移动次数（防抖）

```js
<script>
        // 1、使用lodash防抖函数
        // const box=document.querySelector('.content')
        // let i=0
        // box.addEventListener('mousemove',_.debounce(addI,500))
        // function addI(){
        //     i++
        //     box.innerHTML=i
        // }

        // 2、定时器
        const box = document.querySelector('.content')
        let i = 0
        box.addEventListener('mousemove', debounce(addI,500))
        function addI() {
            i++
            box.innerHTML = i
        }
        function debounce(fn,t){
            let timerId = 0
            return function(){
                if(timerId!==0) clearTimeout(timerId)
                timerId=setTimeout(function(){
                    fn()
                },t)
            }
        }
    </script>
```

##### 39显示鼠标移动次数（节流）

```
<script>
        // 1、使用lodash节流函数
        // const box=document.querySelector('.content')
        // let i=0
        // function addI(){
        //     box.innerHTML=i++
        // }
        // box.addEventListener('mousemove',_.throttle(addI,3000))

        // 2、封装函数（定时器）
        const box = document.querySelector('.content')
        let i = 0
        box.addEventListener('mousemove', throttle(addI, 3000))
        function addI() {
            i++
            box.innerHTML = i
        }
        function throttle(fn, t) {
            let timerId = null
            return function () {
                if (!timerId) {
                    timerId = setTimeout(function () {
                        fn()
                        timerId = null
                    }, t)
                }

            }


        }
    </script>
```