CSS3 H5 第二周

最新推荐文章于 2023-12-17 15:41:58 发布
最新推荐文章于 2023-12-17 15:41:58 发布
阅读量105 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45815953/article/details/117790238
版权

5月31日

H5新增 input属性

<body>
        <form action="#" method="GET">
        请输入e-mail地址 ：<input type="email"><br>
        请输入网址：<input type="url"><br>
        请输入数值：<input type="number"><br>
        滑条：<input type="range"><br>
        请输入日期：<input type="date"><br>
        请输入月份：<input type="month"><br>
        请输入年份和周数：<input type="week"><br>
        请输入或选择时间：<input type="time"><br>
        请输入电话号码：<input type="tel"><br>
        请输入搜索关键词：<input type="search"><br>
        请选择颜色：<input type="color"><br>
        上传文件：<input type="file"><br>
        提交：<input type="submit">
    </form>
</body>

//input 选择框
<body>
   <input type="text" placeholder="选择" list="cityList">
   <datalist id="cityList">
     <option value="经开区" label="jiangkaiqu"></option>
     <option value="中原区" label="zhongyuanqu"></option>
     <option value="金水区" label="jinshuiqu"></option>
   </datalist>
</body>

音频(audio )视频 (video)

<audio src="./mp3/李白.mp3" controls></audio>

<video src="./mp4/1407101.mp4" controls width="300"   height="200"></video>

audio

body>
    <audio src="./mp3/李白.mp3" controls></audio>
    <button onclick="playBtn()">播放</button>
    <button onclick="pauseBtn()">暂停</button>
    <button onclick="volumeBigBtn()">声音放大</button>
    <button onclick="volumeSmallBtn()">声音减小</button>
    <button  onclick="rateBtn()">倍速+</button>
    <button  onclick="rateBtn2()">倍速-</button>
    <button onclick="quickBtn()">快进十秒</button>
    <button onclick=" muteBtn()" >静音</button>
    <button onclick="resetBtn()">重播</button>
    
    <div class="showVo"></div>
</body>
<script>
        var audio = document.querySelector("audio");
        var showVo = document.querySelector(".showVo");
        console.dir(audio);
        audio.volume =0.5;
    // 播放按钮
    function playBtn(){
        audio.play();
    }
    // 暂停
    function pauseBtn(){
        audio.pause();
    }
    // 音量增大 
    function volumeBigBtn(){
      audio.volume = audio.volume< 1?audio.volume +0.1 :1;
      audio.muted = false
      if (audio.volume >=0.9) {
          alert('声音已经最大了')
      }
      showVo.innerHTML=audio.volume;
    }
     // 音量减小
     function volumeSmallBtn(){
      audio.volume = audio.volume>0 ?audio.volume -0.1 :0;
      audio.muted = false
      if (audio.volume <=0.1) {
          alert('声音已经最小了')
      }
      showVo.innerHTML=audio.volume;
    }
    function rateBtn(){
        audio.playbackRate +=0.1
        // audio.playbackRate -= 0.1
        showVo.innerHTML ="倍速"+audio.playbackRate
    }
    function rateBtn2(){
        audio.playbackRate -=0.1
        // audio.playbackRate -= 0.1
        showVo.innerHTML ="倍速"+audio.playbackRate
    }
    function quickBtn(){
        audio.currentTime += 10
        showVo.innerHTML ="时间"+audio.currentTime
    }
    function muteBtn(){
        audio.muted = true
        showVo.innerHTML ="静音状态"+audio.muted
    }
    function resetBtn(){
        // 重新加载音频元素
        audio.load();
        audio.paly();
    }
</script>

6月1日

onload 加载问题

<body>
    <img src="./img/阿尔卑斯山风景4k高清壁纸3840x2160_彼岸图网.jpg" alt="">
    <script src="../study4/jquery.js"></script>
    <script>
        var oimg = document.querySelector("img")
        console.log("下边：",oimg.width);
      // 比如图片 标签加载了 但是图片内容没出现，所以获取不到宽高
      // 比如音频 视频标签加载了，但是音频  视频内容没加载
        window.onload = function(){
            // 生命周期方法
            // 页面标签 和内容加载完毕的时候执行
            // 比如图片 标签加载了 图片内容也加载了
            // 比如音频视频 标签加载了 内容也加载了
           console.log("onload:",oimg.width);
           alert("js-1-1")
        }
        // onload会覆盖  只有一个生效
        window.onload = function(){
            alert("js-2-2")
        }
      

        // jQ 标签加载完毕
        // 可以写多个
        $(function(){
            console.log("jQ",$("img").width());
            alert("JQ 1-1")
        })
        $(function(){
            alert("jQ-2-2")
        })
    </script>
</body>

前端存储

Web 存储 API 提供了 sessionStorage （会话存储）localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

- localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

- sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

storage:  4-5M左右    请求不会携带
cookie :  指定过期时间  4kb左右  发请求的时候会携带

地理定位

<body>
    <div id="showInfo"></div>
</body>
<script>
    var showInfo = document.querySelector("#showInfo")
    /*
        定位  卫星  GPS  北斗
        WiFi  基站   IP
        因为定位属于 隐私 所以需要获得用户的同意  所以有弹出提示

    */ 
   if(navigator.geolocation){
    //    支持
    // getCurrentPosition 获取当前位置
        navigator.geolocation.getCurrentPosition(secess,errow)
    }else{
    // 不支持
        alert('抱歉，你不太行')
    }
   function secess(position){
    
    //因我们知道这个函数是获取当前位置成功的回调
    //也就是说这个函数里面JS应该会有参数告诉我们位置信息
    //但是我们又不知道都有哪些信息﹐
    //这个时候直接打印这个arguments
    //    打印函数的参数
    console.log("成功",arguments);
    // latitude 纬度  0 - 90
    // longitude 经度 0 - 180
    showInfo.innerHTML = `经度：${position.coords.longitude}<br>
    纬度：${position.coords.latitude}
    `

    // 经纬度转换为地图 借助开放平台   百度地图  高德地图
   }
   function errow(){
    //    打印函数的参数
    console.log("失败",arguments);
    }
</script>

6月2日

使用百度开放地图

    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
</style>

</head>
<body>
    <!--  打开百度地图开放平台 -->
    <!-- 
        第一次使用百度地图
        1 开发者文档 web开发 JavaScript API
         2 左侧菜单 开发指南 账号和获取密钥
            页面下方申请密钥 ak
            完成操作
          3 点击申请 


        已经有百度地图账号的 情况下的步骤
        
          4 登录账号  菜单上方 有控制台
          5 左侧  有菜单 选择应用管理
          6 我的应用   
          可以查看自己以前的应用
          7 也可以创建新的应用 
                应用名称 随便填
                应用类型 根据自己的需求 目前是浏览器端

                 白名单 测试的时候可以填* 
          
        如何使用 百度地图
        1 百度地图开放平台首页
        2开发者文档 web开发 JavaScript API
        3左侧菜单 有个示例 DEMO
        4 选择你想要的 地图
         -->

    <!--  1. 复制百度地图 脚本 src  路径 ak改为自己的 -->
    <!--  2.  写 地图显示的 容器标签 -->
    <!--  3.  设置地图容器标签的 样式 -->
    <!--  4.  创建百度地图对象 -->
    <!--  5.  一些具体的 配置信息 -->
    <div id="container"></div>
</body>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=QFuttil6cGdsc0aL3OGglfLHd40wS85B"></script>
</html>
<script>
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom('郑州市', 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>

进制转换问题

 <script>
        /**
         * 二进制     0 1 
         * 八进制     0 1 2 3 4 5 6 7
         * 十进制     0 1 2 3 4 5 6 7 8 9 
         * 十六进制   0 1 2 3 4 5 6 7 9 a b c d e f
         * 
         * 
         *   123 权重 百十个
         *   10^2*1 + 10^1*2 + 10^0*3 
         *  编程里面 0开头表示八进制   010  8
         *          0x开头表示十六进制 0xa 10
         * 
         * 
         */
        // parseInt(数字，进制)
        console.log(parseInt(10, 2));
        console.log(parseInt(10, 8));
        console.log(parseInt(10, 10));
        console.log(parseInt(10, 16));
    // 因为计算机只认识二进制
    // 所以 计算机在进行计算的时候
    // 是先把所有的数字转为二进制 ，进行结算得出 结果（二进制）
    // 再把这个二进制的结果转为10进制 

    // 所有在计算的时候就会 在 2个转换的过程有不准确的 情况产生

    // 实际开发怎么避免
    // 因为 这个牵扯到计算保存
    // 钱  单位 分 或者  最少数据库存的都是分
    // 1.5元   15角 150分   
    </script>

canvas画布

 <style>
        canvas{
            border: 1px solid red;
            /* 不要设置宽高 */
        }
    </style>
</head>
<body>
    <canvas width="300" height="300"> 新标签 不支持 才显示</canvas>
    <!-- 
        canvas 是一个新标签 具有 height weight属性
        ！！！！不要通过css样式来设置宽高  会有问题
        画布  但是想要具备画布的功能 还需要js来写
     -->
     <script>
        //  1. canvas 标签 属性设置宽高
        //  2.获取画布对象
        //  3.获取画布环境

        //  获取画布对象
         var myCanvas = document.querySelector('canvas')
        //  获取画布环境
        var ctx = myCanvas.getContext("2d")
        // 在画布上 定位一个矩形 （x  ，y， 宽， 高）
        // x  y  相对于画布左上角的位置
        // 画笔颜色
        ctx.fillStyle="red"
        // ctx.fillRect(10,10,50,50)

        for (let i = 0; i < 10; i++) {
            ctx.fillRect(i*30,i*30,30,30)
            
        }
        for (let i = 10; i >0; i--) {
            ctx.fillRect(i*30,i*30,30,30)  
        }
     </script>
</body>

6月3日

canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <style>
        canvas{
            border: 1px solid red;
            /* 不要设置宽高 */
        }
    </style>
</head>
<body>
    <canvas width="500" height="500"> </canvas>
  
     <script>
      
        var myCanvas = document.querySelector('canvas')
        //  获取画布环境
        var ctx = myCanvas.getContext("2d")
       //设置线段颜色
        ctx.strokeStyle="rgba(35,224,130,0.7)"
      //☆ 1.开始路径 不带参数
       ctx.beginPath()
      //☆ 2.moveTo是起点
        ctx.moveTo(30,30)
      //☆ 3.lineTo设置点坐标
        ctx.lineTo(300,300)
        ctx.lineTo(30,300)
      //☆ 4.闭合路径  会把点的末尾 和 起点连起来
        ctx.closePath()
      //☆ 5.绘制连线
        ctx.stroke()
		
	  //重新绘制
      //☆ moveTO()和之前的点不连起来 
        ctx.beginPath()
        ctx.moveTo(30,30)
        ctx.lineTo(300,30)
        ctx.lineTo(300,300)
        ctx.closePath()
        ctx.stroke()
    // 交叉地方的样式
    // miter 默认直角
    // round 圆角
    // bevel 斜角
     ctx.lineJoin ="round"
    // 线末尾的样式
    // 用lineCap 不能用closePath()
     ctx.lineCap = "round"
     
    </script>
</body>
</html>

canvas for随机颜色饼状图

<style>
        canvas{
            border: 1px solid red;
            /* 不要设置宽高 */
        }
    </style>
</head>
<body>
    <canvas width="500" height="500"> </canvas>
  
     <script>
      
         var myCanvas = document.querySelector('canvas')
        //  获取画布环境
        var ctx = myCanvas.getContext("2d")

        var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    /*分成几等分*/
    var num = 24;
    /*一份多少弧度*/
    var angle = Math.PI * 2 / num;
    /*原点坐标*/
    var x0 = w / 2;
    var y0 = h / 2;
    /*获取随机颜色*/
    var getRandomColor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + b + ')';

    }
    /*上一次绘制的结束弧度等于当前次的起始弧度*/

    //var startAngle = 0;
    
    for (var i = 0; i < num; i++) {
        var startAngle = i * angle;
        var endAngle = (i + 1) * angle;
        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.arc(x0, y0, 150, startAngle, endAngle);
        /*随机颜色*/
        ctx.fillStyle = getRandomColor();
        ctx.fill();
    }
     </script>
</body>

canvas 曲线

<body>
    <canvas width="500" height="500"> </canvas>
     <script>
         var myCanvas = document.querySelector('canvas')
        //  获取画布环境
        var ctx = myCanvas.getContext("2d")

        ctx.beginPath();
        ctx.moveTo(10,10)
       ☆// ctx.quadraticCurveTo (弯曲程度x，弯曲程度y，x，y)
        ctx.quadraticCurveTo(3,500,300,250)
        ctx.closePath()
        ctx.stroke()

        ctx.beginPath();
        ctx.moveTo(10,300)
        ☆//贝塞尔曲线 (起始点x，起始点y，倾斜度x，倾斜度y，终点x，终点y) 
        ctx.bezierCurveTo(0,100,300,300,300,100)
        ctx.stroke()
     </script>
</body>

canvas 截屏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <style>
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <video src="./mp4/1407101.mp4" controls id="vid"></video>
    <canvas width="1000" height="500">白给</canvas>
    <button onclick="caputre()">截屏</button>
    <script>
        var mycanvas = document.querySelector("canvas")
        var ctx = mycanvas.getContext("2d")
        ☆// 截屏
        function caputre(){
            ctx.drawImage(vid,0,0,1000,500)
        }
    </script>
</body>
</html>

6月4日

动画事件

 <style>
        div{
            width: 200px; height: 200px;
            background-color: red;
            animation: move 3s 4;
            transition: all 2s;
        }
        @keyframes move{
            to{width:600px;}
        }
        @keyframes move1{
            to{width:600px;}
        }
        div:hover{
            background-color: blue;
            animation-play-state: paused;
            animation: "" ;
        }
        div:active{
            transition: none;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
    //  1. 获取 动画标签
    //  JS是 DOM 驱动 画事件
    //  从标签为出发点
       var odiv = document.querySelector("div")
    //    帧动画监听 生命周期 钩子
    odiv.onanimationstart = function(){
        console.log("start 动画开始 只调用1次");
    }
    odiv.onanimationend = function(){
        // 暂停 不是结束 所以不会触发这个end事件
        console.log("end");
    }
    odiv.onanimationiteration = function(){
        console.log("iteration 重复执行");
    }
    odiv.onanimationcancel = function(){
        console.log("cancel");
    }
    
    // 过渡动画 监听 都执行 1次
     odiv.ontransitionstart  = function(){
         console.log(" 补间动画 start");
     }
     odiv.ontransitionrun = function(){
        console.log(" 补间动画 run ");
     }
     odiv.ontransitionend = function(){
        console.log(" 补间动画 end");
     }
     odiv.ontransitioncancel = function(){
        console.log(" 补间动画 cancel");
     }
    </script>
</body>
行.年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5+css3面试题总结
Ryan的博客
08-22 2万+
H5+css3面试题总结 哈喽，各位小伙伴们，又到了一年一度的毕业季，俗话说的话：毕业等于失业。一毕业就要面临着找工作的压力。我们程序员也是一样，程序员找工作更辛苦。因为还会有技术面试。所以我给大家总结了我面试的一些问题及答案，希望能帮到大家 一、html5和html的区别： 1.html5新增了语义化标签：footer 、nav、section… 2.html5完全支持css3 3.支持本地离线...
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 3673
h5(html5)+css3+移动端前端 知识点详细总结
h5和css3新特性
msn131420的博客
02-25 2247
一、HTML5 的新特性 1.新增语义化标签 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 **IE9+ 以上版本的浏览器**才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 注意：只需要关注开发常用的新特性即可。 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div> <div class=“nav”&.
h5新标签和css3新特性
nunumaymax的博客
03-05 2269
h5新标签和css3新特性一、h5布局元素二、css3新增样式1.边框圆角2.阴影3.形变：旋转、缩放、位移 一、h5布局元素 布局元素相当于有语义的div，可以让人快速的了解整个静态页面的大致结构。 header：网页头部 nav：导航栏 aside：侧边栏 article：显示文章 section：布局的一部分 footer：网页页脚 二、css3新增样式 1.边框圆角 border-radius: 左上 右上 右下 左下； 如果设置一个值，则这个值代表全部方向； border-radius:3
纯H5+CSS3实现下雨特效
weixin_58459702的博客
07-28 707
纯H5+CSS3实现下雨特效
h5+css3 响应式滑动菜单
qq_50951790的博客
11-04 881
html5+css3滑动式布局效果
h5与css3的新增特性
weixin_43906020的博客
02-06 377
如果我们将盒子模型改为 border-box 模式，那么它的 padding 和 border 不会撑大盒子的大小（前提是不超过width的大小）。在< audio > 与 < /audio > 之间你需要插入浏览器不支持的< audio >元素的提示文本。伪元素选择器，在文档结构中我们无法找到相应的标签，那么这个元素很大程度是伪类元素，简化html结构。css提供了多种多样的伪类选择器，能让我们根据不同的条件选取所需的元素。为了网页更好的展示媒体影音，h5提供了新的标签。
H5+CSS3+JS逆向前置——HTML1、H5文本元素
红目香薰
12-17 1219
H5+CSS3+JS逆向前置——HTML1、H5文本元素
多屏动画css3,17个CSS3进度条加载动画效果—H5页面开发第三课
weixin_29603829的博客
08-03 661
H5移动页面开发，目前也越来越热啦，无论开发哪一种移动H5页面，加载动画是必不可少的。 除了我们经常看到的那些酷炫的CSS3进度条加载动画效果外，也有一些很有创意的H5页面加载演示效果。1、10款造型奇特的CSS3进度条动画DEMO演示效果这10款进度条应用不仅有创意的外观，而且还有非常特别的动画效果。另外，有些进度条还可以用在Loading动画，效果也挺不错。之前也介绍过一些CSS3进度条和Lo...
h5+css3+js之移动端轮播图
chen__cheng的博客
02-09 1320
概要 功能概要 自动播放轮播图 用户手动滑动轮播图 涉及知识点 采用css3中transition实现动画移动过渡效果以及transform实现动画效果 采用h5中classList切换类的方式实现底部小圆圈同步变化效果 移动端touch触屏事件 效果预览 实现代码 html <!-- 轮播图--> <div class="focus"> <ul> <li><img src="../imgs/OIP.jpg" a
H5全栈工程师-智游培训班 Html5+Css3第一阶段-个人零基础前端资料
08-17
第二阶段 包括第一周到第四周---老师的教学资料-实战-练习（JS、JQuery） 第三阶段 包括第一周到第四周---老师的教学资料-实战-练习（node.js、前后端交互-智游问答系统--服务端模板化） 第四阶段 包括第一周到第四...
HTML5CSS3Study:HTML5和CSS3学习手记及
03-23
HTML5 + CSS3学习记录，后面增加更少与Sass学习内容 笔记为个人纪录，章节号与文件夹序号对应 01什么是HTML5，HTML5新特性概览-新的标签属性 H5并不是新的语言，而是HTML语言的第五次重大版本修改。 支持：所有的...
Head First HTML与CSS第2版，高清
08-05
自学后再上传的Head First HTML与CSS第2版。很适合入门的学，讲得有很细。有点基础的可以直接去看h5的。
12个经典大气的HTML5/CSS3应用动画
08-23
今天我们就接着来分享第二波干货，也是基于HTML5和CSS3的动画应用，将涉及到HTML5表单、HTML5图片特效以及HTML5图表等应用领域，希望大家会喜欢。 1、HTML5/CSS3自定义下拉框 3D卡片折叠动画 之前我们分享过一款CSS3...
rockyou.txt
06-06
rockyou
ASP+ACCESS网上人才信息管理系统(源代码+论文)【ASP】.zip
06-06
ASP+ACCESS网上人才信息管理系统(源代码+论文)【ASP】
河北金融学院经济大数据课设2024年 软科学校爬虫课设
06-06
河北金融学院经济大数据课设2024年 软科学校爬虫课设
widgetsnbextension-4.0.0b0-py3-none-any.whl
最新发布
06-06
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
H5、CSS3新属性,ES6新特性
07-25
H5、CSS3新属性和ES6新特性是现代Web开发中非常重要的内容。 H5（HTML5）是HTML的第五个版本，引入了许多新的语义化标签和功能。其中一些新属性包括： 1. `<canvas>`：用于绘制图形、动画和其他视觉效果。 2. `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值