结构图如下：

html如下：

<!DOCTYPE html>

<html>

<head>

    <title>button test</title>

  <link rel="stylesheet" type="text/css" href="css/1.css">

</head>

<body>

<script src="js/udf.js"></script>

<input class="btn1" type="button" value="click" onclick="func1()">

<input id="txt1" class="txt1" type="text" value="">

</body>

</html>

css如下：

.btn1{

  font-size: 24px;

  width: 100px;

  height: 60px;

}

.txt1{

  font-size: 48px;

  width: 100px;

}

js如下：

function func1()

{

  var sum=0;

  var string1 = document.getElementById("txt1");

    for(var i =1;i<=10;i++)

    {

    sum += i;

        //document.write(sum+"<br\>") ;

    }

  string1.value = sum;

}

外联css及js的使用的更多相关文章

  1. 内联外联CSS和JS

    内联CSS 代码示例: <p style="color:red;font-size:18px">这里文字是红色.</p> 内联CSS也可称为行内CSS或者行 ...

  2. 在VIEW引入CSS、JS文件

    外联 CSS: <?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?> generates <!-- ...

  3. background属性总结，background-image路径问题相对于css和js

    (1)background属性总结 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color规定要使用的背景颜色.background-pos ...

  4. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  5. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  6. 来，一起让我们越来越懒，面向CSS、JS未来编程。(9.28已更新)

    2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点 ...

  7. 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子

    一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...

  8. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  9. django 关于html、css、js 目录位置

    项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...

随机推荐

  1. 樱花漫地集于我心，蝶舞纷飞祈愿相随---总结 顕出：void-sampling 显示：void-sampling

    知识点: 分支语句,四则运算,(￣y▽￣)~* 实验过程中遇到的问题及解决方法: 忘记换行,忘记代码,输入法切换(´∀｀*) 暂时还得照书写,*★,°*:.☆\(￣▽￣)/$:*.°★* 实验心得体会 ...

  2. PHP数组去重..............过滤字段

    $test_data = M('hot'); //实例化数据表 $data = $test_data->Distinct(true)->field('descriprion')->o ...

  3. Appcan 3.2 Switch操作

    Appcan3.0,有了很多不错的东西,但官方的文档还是那么的不靠谱. 我将记录下,我学习到的东西. 显示2个switch <div class="ub ub-pe"> ...

  4. Oracle GoldenGate for Big Data 12.2.0.1的新特性

    ogg for bigdata 12.2已经发布,新增有如下特性:支持java replicat进程OGG12.2中开发了基于java的replicat模式,以前的版本是基于extract进程中使用u ...

  5. 永不消逝的电波（二）HackRF入门：家用无线门铃信号重放

    0×00 前言 在第一篇文章:永不消逝的电波(一):无线电入门篇 我们了解了一下无线电的发展史以及无线电的一些物理知识,在第二篇里我们将用HackRF录制家用门铃的无线信号,然后重放门铃信号. 门铃从 ...

  6. php get_magic_quotes_gpc()函数用法介绍

    magic_quotes_gpc函数在php中的作用是判断解析用户提交的数据,如包括有:post.get.cookie过来的数据增加转义字符“\”,以确保这些数据不会引起程序,特别是数据库语句因为特殊 ...

  7. 创建一个maven web project

    几经周折总算是找到了和高杨学长一样的web  project的方法.感谢学长的一语点醒.我之前以为,既是maven又是web project的项目得要是通过dynamic web project转换到 ...

  8. gradle 本地 配置

    distributionUrl=file:///D:/react/gradle-2.4-all.zip 记住差一点都会报错 编译运行Android 我们进入AwesomeProject目录, $ cd ...

  9. odoo.cli.main()指的是哪里？OpenERP的第二根线头儿

    接上回,odoo-bin中调用了odoo.cli.main(),去哪儿找? cli目录容易找 跟随__init__.py的脚步 import logging import sys import os ...

  10. ✡ leetcode 165. Compare Version Numbers 比较两个字符串数字的大小 --------- java

    Compare two version numbers version1 and version2.If version1 > version2 return 1, if version1 &l ...