开始自学

最新推荐文章于 2024-05-08 18:30:00 发布

jihn_kevin

最新推荐文章于 2024-05-08 18:30:00 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/jihn_kevin/article/details/105698396

版权

面向工作编程

前言
- 技能挑选
- 学习路径
Day1

前言

25岁的大学毕业生，正在美帝野鸡大学修读computer science的master学位。在第一个学期上完computer architecture和operating system两门专业课后，自觉靠这破学校的老师教的东西毕业后是没办法在美国获得opt工作的机会，遂而自学。

技能挑选

我选择了先学习HTML5，原因有以下几个：

语法简单，或者说没有语法
不需要安装IDE或者其他软件，新建一个txt文档再把后缀改成html便可
曾经学过php，重新学习html相当于复习，降低难度
HTML属于前端，前端难度低不倚靠算法

学习路径

W3School学习HTML基本语法 >本地创建基础页面>W3School学习JavaScript》……

Day1

页面播放视频

代码如下

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center;">
    <button onclick="playPause()">Play/Pause</button>
    <button onclick="makeBig()">Big</button>
    <button onclick="makeNormal()">Normal</button>
    <button onclick="makeSmall()">Small</button>
<br/>
    <video id="video1" width="420" height style="margin-top:15px;">
        <source src="/example/html5/mov_bbb.mp4" type="video/mp4">
        <source src="/example/html5/mov_bbb.ogg" type="video/ogg">
    Your Browser Does Not Support HTML5.
    </video>
</div>
<script type="text/javascript">
    var myVideo=document.getElementById("video1")
    function playPause()
        {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }
    function makeBig()
        {
            myVideo.width=560;
        }
    function makeNormal()
        {
            myVideo.width=420;
        }
    function makeSmall()
        {
            myVideo.width=320;
        }
</script>
</body>
</html>

实现效果:

在这里插入图片描述

拆开分析 - 使用的对象

1. button
具体语句

    <button onclick="playPause()">Play/Pause</button>

onclick：赋予按键具有单击后有功能的属性
playPause()：单击后的功能由这个函数实现
Play/Pause：按键上显示这段文本提示用户

2. video
具体语句

<video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4">
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg">
Your Browser Does Not Support HTML5.
</video>

id:给目标视频赋予一个id，方便函数对视频进行操作
style:固定视频的位置
source:给出视频的来源

3.function （目前还不需要了解）

<script type="text/javascript">
    var myVideo=document.getElementById("video1")
    function playPause()
        {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }
</script>

script:使用的函数都要放在script之内
var:先由目标的类型(video)，确认需要用到哪些方法并赋值，接下来就可以方便使用对应的函数

学习目标

video
button
script

创建一个表格

示例表格：

类别1	类别2	类别3
项目a	项目b	项目c
项目d	项目e	项目f

接下来

学习内容

HTML

Markdown

JavaScript 和 HTML DOM 参考手册

jihn_kevin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
开始自学

面向工作编程前言技能挑选学习路径Day1==页面播放视频==插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入前言25岁的大学毕业生，正在美帝野鸡大学修读computer sci...
复制链接

扫一扫