前情提要:

　　　　利用html 和css ,js 模拟小米的官网(待做)

　　　　一:第一个sj利子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        // <!--编写js代码-->

        document.write('<h1>hello world</h1>')

    //    把网页发送到网页上

        alert('hello python')

    //    弹出提示框

    </script>

    <style>

        h1{

            color: red;

        }

    </style>

</head>

<body>

<script>

    document.write('<h1>hello java</h1>')

</script>

</body>

</html>

<script>

    document.write('<h1>hello golang</h1>')

</script>

　　　　二:引入外部js文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script type="text/javascript" src="d.js">-->

    <!--或者-->

    <script  src="d.js" async>

    </script>

</head>

<body>

<input type="button" value="click me" onclick="alert(11)">

</body>

</html>
alert("hello wold")

　　　　三:定义变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var aa = '早乙女';

        var bb = 10.5;

        var cc = true;

        dd = 10;

        alert(aa);

        alert(bb);

        alert(cc);

        alert(dd);

    </script>

</head>

<body>

</body>

</html>

　　　　四:运算符号

　　　　五:条件判断

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var aa=[40];

        if (aa>60){

            document.write("<p>优秀</p>")

        }

        else if(aa>50){

            document.write("<p>及格</p>")

        }

        else {

            document.write("<p>不及格</p>")

        }

    </script>

</head>

<body>

</body>

</html>

　　　　六:条件判断2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        // <!--根据需求生成星期几-->

        var aa=2;

        switch (aa){

            case 1:{

                document.write('这是星期1')

            }

            break;

            case 2:{

                document.write('这是星期2')

            }

            break;

            case 3:{

                document.write('这是星期3')

            }

            break;

            default:{

                document.write('没这个新奇')

            }break;

        }

    </script>

</head>

<body>

</body>

</html>

　　　　七:循环

一:

二:

三:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script>

    // <!--while 循环条件写在前面-->

    // <!--输出1~10的和-->

    // var num =0;

    // var sun =0;

    // while (num<10){

    //     sun =sun+num;

    //     num++;

    // }

    // alert(sun)

//    do while 循环

//    计算1~10 内的奇数和

//     var num =0;

//     var sun =0;

//     do{

//         if (num%2==1){

//             sun=sun+num;

//         }

//         num=num+1;

//     }while (num<10)

// alert(sun)

//    计算1~10 的偶数相加

    var sun =0;

    for (var num =1;num<=10;num++){

        if (num%2==0){

            sun=sun+num;

        }

    }

    alert(sun)

</script>

</head>

<body>

</body>

</html>

　　　　

八:循环案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script>

    // <!--生成一个三角形-->

    for (var i=1;i<=6;i++){

    //    生成空格数量

        var spnum =6-i;

        for(var col=1;col<=spnum;col++){

            document.write('&nbsp;');

        }

        var srnum =2*i-1;

        for (var nol=1;nol<=srnum;nol++){

            document.write("*")

        }

        document.write("<br/>")

    }

</script>

</head>

<body>

</body>

</html>

day 32 css后续补充以及js 简单入门的更多相关文章

  1. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  2. JS简单入门教程

    JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...

  3. css属性补充与JS数据类型

    目录 溢出属性(overflow) 定位(position) z-index属性 opacity不透明度 JavaScript简介 变量与注释 数据类型 数值(Number) 字符串(String) ...

  4. [转]Backbone.js简单入门范例

    本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...

  5. anime.js 简单入门教程

    anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全. 下面就来看看如 ...

  6. angular.js简单入门。

    小弟刚接触angular js  就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...

  7. JS简单入门

    ------------恢复内容开始------------ JavaScript,可以减少网页的规模,提高网页的浏览速度,丰富页面的表现和功能 HTML是进行基本结构的创建的,比如说表格和表单等, ...

  8. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  9. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

随机推荐

  1. 常用C字符串函数

    static void str_repalce(char *src,char *from,char *to) {     char *p,*q;     int lenFrom;     int le ...

  2. Socket使用大全

    第一部分.概念的理解 1.什么是Socket? Socket又称之为“套接字”,是系统提供的用于网络通信的方法.它的实质并不是一种协议,没有规定计算机应当怎么样传递消息,只是给程序员提供了一个发送消息 ...

  3. [转载红鱼儿]Delphi实现微信开发（3）如何使用multipart/form-data格式上传文件

    开始前,先看下要实现的微信接口,上传多媒体文件,这个接口是用Form表单形式上传的文件.对我来说,对http的Form表单一知半解,还好,查到这个资料,如果你也和我一样,必须看看这篇文章. 在xali ...

  4. 2018.10.18 poj2187Beauty Contest（旋转卡壳）

    传送门 旋转卡壳板子题. 就是求凸包上最远点对. 直接上双指针维护旋转卡壳就行了. 注意要时刻更新最大值. 代码: #include<iostream> #include<cstdi ...

  5. CentOS yum 源的配置与使用（引用）

    http://www.cnblogs.com/mchina/archive/2013/01/04/2842275.html

  6. python操作数据库-数据表

    数据表: 数据类型: 帮助的三种形式: 在cmd中输入: help 要帮助的主题词,或 ? 要帮助的主题词 或  \h 要帮助的主题词 . 数据表的创建: CREATE database IF NOT ...

  7. 201709011工作日记--ART与Dalvik&&静态类与非静态类

    1.ART 与 Dalvik 的优缺点对比 什么是Dalvik:Dalvik是Google公司自己设计用于Android平台的Java虚拟机.dex格式是专为Dalvik应用设计的一种压缩格.Dalv ...

  8. (转)EF Power tool用法

    转自:http://msdn.microsoft.com/zh-cn/data/jj593170.aspx 命令摘要 安装 EF Power Tools 后,将提供以下上下文菜单项.本演练将详细讨论这 ...

  9. day08(异常处理，创建异常，finally，throws和throw的区别)

    异常处理, 异常的产生  运行时异常:程序运行中产生的异常:RuntimeException类.   编译时异常:程序在编译时产生的异常:除了RuntimeException类  其他都是编译时产生的 ...

  10. Ubuntu 16.04下安装网络流量分析工具 Wireshark

    本文链接地址:https://www.linuxidc.com/Linux/2016-08/134526.htm 切勿用商业用途 sudo apt-add-repository ppa:wiresha ...