前情提要:

　　　　利用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. 2、C++

    2.2定义变量 2.2.1命名规则 赋予变量的名称叫做标识符,或者更方便地称之为变量名.变量名可用字母(包括大小写),数字,以及下划线,其他字符不允许.以下划线或者字母开头.在Visual C++20 ...

  2. IT 技术网站收集

    ## 脚本之家 http://www.jb51.net/ ## 菜鸟教程 http://www.runoob.com/ ## 编程中国 https://www.bccn.net/ ##

  3. 【JAVA】通过URLConnection/HttpURLConnection发送HTTP请求的方法（一）

    Java原生的API可用于发送HTTP请求 即java.net.URL.java.net.URLConnection,JDK自带的类: 1.通过统一资源定位器(java.net.URL)获取连接器(j ...

  4. 冒泡排序java语言实现

    class bubbleSort { public static void main(String[] args){ int[] a={49,38,65,97,76,13,27,49,78,34,12 ...

  5. 使用bat批处理文件备份postgresql数据库

    @echo offset pgsql_path=d:\"Program Files"\PostgreSQL\9.3\bin\   //安装目录set database=postgr ...

  6. 【转】web应用缓慢故障分析

    在这以后里分享一篇关于web应用缓慢的分析过程,感觉挺有用的. 原文出处:http://xjsunjie.blog.51cto.com/999372/751585 友在一家购物网站做运维不久,今日打电 ...

  7. changetoutf-8

    import chardet import os # ANSI文件转UTF-8 import codecs import os def strJudgeCode(str): return charde ...

  8. New JVM Option Enables Generation of Mixed-Mode Flame Graphs

    转自 https://www.infoq.com/news/2015/08/JVM-Option-mixed-mode-profiles Java has added a new launch opt ...

  9. hdu 4993

    http://acm.hdu.edu.cn/showproblem.php?pid=4993 满足ax + by = c的x,y对数 水题,暴力 #include <cstdio> #in ...

  10. Spring MVC 的@RequestParam注解和request.getParameter("XXX")

    在SpringMVC后台控制层获取参数的方式主要有两种,一种是request.getParameter("name"),另外一种是用注解@RequestParam直接获取.这里主要 ...