前情提要:

　　　　利用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. 中介者模式（QQ聊天室我觉得是个很生动的例子简单易懂）

    设计模式之中介者模式(Mediator) 一.初识中介者模式 那些年,我们一起上过的大学,班级里有班长,有团书记.想一想如果没有QQ这种通讯工具的话,那么班长或者团支书该怎样下达消息呢??同时,班级上 ...

  2. cocos2d接安卓facebook插件（已测cocos-x 3.7 3.8版本）

    1  控制台创建新工程: a 控制台 进入cocos2d文件夹下面,如cocos2d-x-3.7.1,执行setup.py,未设置NDK SDK ANT 路径的设置路径,需要改路径的 explore ...

  3. Oracle sql的基本优化写法和思路。

    首先简单介绍下常规的sql优化的方式: 1.肯定有人说建索引啊. 2.数据量实在太大,建分区啊. 3.其实基于目前公司的业务还有一种办法那就是向上聚集表.根据查询业务,专门抽取上来一张表,直接做到se ...

  4. 2018.08.28 洛谷P4556 [Vani有约会]雨天的尾巴（树上差分+线段树合并）

    传送门 要求维护每个点上出现次数最多的颜色. 对于每次修改,我们用树上差分的思想,然后线段树合并统计答案就行了. 注意颜色很大需要离散化. 代码: #include<bits/stdc++.h& ...

  5. 按str 存储和按 list 存储

    按str 存储1 w2 = open('./trsd_w.txt','a')#a代表追加 w代表重写 if matcher1: flag = 1 w2.write("\n") fo ...

  6. 记一次项目使用webuploader爬坑之旅

       因前端页面开发使用的为VUE开发,又要支持IE9,遂只有基于webuploader封装一个上传组件.地址:https://github.com/z719725611/vue-upload-web ...

  7. strcpy,strlen, strcat, strcmp函数,strlen函数和sizeof的区别

    //计算字符串实际长度        //strlen()函数:当遇到'\0'时,计算结束,'\0'不计入长度之内,如果你只定义没有给它赋初值,这个结果是不定的,它会从首地址一直找下去,直到遇到'\0 ...

  8. （线段树 && 字符串的处理）codeforces -- 570C

    链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87813#problem/J Description Daniel has a s ...

  9. bootstrap-treeview 关于checkbox选择框不显示的问题

    bootstrap-treeview.js  1.0.2 不支持checkbox,最后使用 bootstrap-treeview.js  1.2.0 解决此问题.

  10. cordova使用webrtc与网页端及移动端视频、语音聊天

    最近在做一个移动端与移动端.网页端文字.视频.语音聊天的功能.文字聊天使用websocket,在网上很多资料,也没什么难度.但是在视频.语音聊天上遇到了小小的难点.之前一直在找一些SDK想快速开发,例 ...